返回顶部js代码

来源:本站原创 点击数: 发布时间:2013年01月02日

    为方便网站访问者的网站使体验,很多网站有返回顶部的js调用,有的是使用随屏移动的返回顶部按钮,有的是使用固定的位置提示返回顶部。

   这里给大家介绍一个点击网站页面任意空白处返回顶部的代码。这个效果会给网站浏览者更好的浏览体验,比起点击固定位置来的更自由及方便。

   以下是js代码,将以下代码放到网站标记中即可。使用前提为,页面上引用了jquery。

 


$(function(){
    var scrollTo = function(top, duration, callback) {
        var w = $(window);
        var FPS = 50;
        var currentTop = w.scrollTop();
        var offset = (currentTop - top) / (duration * FPS / 1000);
        var n = 0;
        var prevTop = currentTop;
        var t = setInterval(function() {
            if ((prevTop - top) * (currentTop - top) <= 0) {
                clearInterval(t);
                currentTop = prevTop = top;
                w.scrollTop(top);
                if (callback) callback();
            } else {
                prevTop = currentTop;
                w.scrollTop(currentTop -= offset);
            }
        }, 1000 / FPS);
    }
    $('body').dblclick(function(){
        scrollTo(0, 200, function(){
        });
        $(".textField,#commentForm textarea").focus();
    });
    $('#container.#footer').dblclick(function(e){e.stopPropagation();});
});