返回顶部

来源：互联网发布：js跨域解决方案 java 编辑：程序博客网时间：2024/04/28 11:32

jQuery下的返回顶部功能

您可以狠狠地点击这里：jQuery下的返回顶部demo

可以看到，如果页面有滚动高度，右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条，如下图所示：
demo页面效果截图张鑫旭-鑫空间-鑫生活

点击这里“返回顶部”字样的按钮后，页面就像是抹了润滑剂一样，倏地一声就滑到顶部了，同时，该点击按钮也玩起了躲猫猫 – 不见了。

实现的原理嘛，恩……估计鲜有人关心，所以我也懒得浪费口水了，直接上代码。

无论是这里的jQuery实现还是MooTools实现，下面的CSS代码都是一致的，如下：

.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);}

js相关代码如下：

(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(); });})();

寥寥十几行代码就实现了全部的交互细节了。您可以将上面代码直接拷贝到您的JavaScript文件中，页面就有效果啦！对了，请使用jQuery 1.4+。