jQuery返回顶部特效，滚动条拖至最底部

2024-09-05 12:18:18

字体：大中小

来源：转载

供稿：网友

智能的“回到顶部”特效，将网页的滚动条拖至网页的最底部后，右下角会出现“回到顶部”的文字链接，点击一下就可以回到网页的最顶端，目前在不少的大网站都有此项功能。本代码使用了jQuery插件，代码运行更稳定，而且兼容性也不错。

<html><head><title>返回顶部特效，滚动条拖至最底部</title><script language="javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script><script language="javascript">$(function(){	 var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")) .text($backToTopTxt).attr("title", $backToTopTxt).click(function() { $("html, body").animate({ scrollTop: 0 }, 120); }), $backToTopFun = function() { var st = $(document).scrollTop(), winh = $(window).height(); (st > 0)? $backToTopEle.show(): $backToTopEle.hide(); //IE6下的定位 if (!window.XMLHttpRequest) { $backToTopEle.css("top", st + winh - 166); } }; $(window).bind("scroll", $backToTopFun); $(function() { $backToTopFun(); });});</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>/*返回顶部*/.backToTop {display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; color: #fff; font-size: 12px; text-align: center; position: fixed; _position: absolute; right: 10px; bottom: 100px; _bottom: "auto"; cursor: pointer; opacity: .6; filter: Alpha(opacity=60);}</style></head><body>往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来往下拉，才会出来</body></html>

上一篇：jQuery合成事件toggle，折叠展开的面板

下一篇：QQ在线客服代码演示