jQuery实现回到顶部的功能

回到顶部的功能在网页中很常见。当网站内容过多的时候，添加一个返回顶部的功能，可以更好的增加用户体验。
今天动手用jQuery写了这样一个效果。但是还有有一个问题：当点击回到顶部按钮时，滚轮回滚的时候，无法实现。
如果有朋友知道解决方案，麻烦指点下下。

但是IE6不支持fixed属性。在这里做了一下兼容.

*{margin:0;padding:0;}
/*测试，浏览器产生滚动条*/
body{height:2000px;}
/*解决IE6下固定定位抖动的问题*/
*html,*html body{
    background-image: url(about:blank);
    background-attachment: fixed;
}
#back{
    width:55px;
    height:55px;
    /*开始是隐藏的*/
    display: none;
    background:url(back.png) no-repeat -70px 0;
    position:fixed;
    right:30px;
    bottom:30px;
    /*兼容IE6*/
    _position:absolute;
    _right:30px;
    /*
        可视区域的高度-自身的高度-距离底部的距离+滚动的距离
    */
    _top:expression(eval(document.documentElement.clientHeight-this.offsetHeight-30+document.documentElement.scrollTop));
}

简单说下步骤：

• 隐藏回到顶部按钮
• 滚动条滚动一定距离后显示按钮,一般都是可视区域的高度
• 点击按钮回到顶部

具体的写法如下：

$(function(){
    //获取元素
    var $goBack = $('#back');
    $goBack.click(function(){
        var $body = (window.opera) ? (document.compatMode == 'CSS1Compat' ? $('html') : $('body')) : $('html,body');
        $body.animate({
            scrollTop:0
        }, 1000);
    });
    $goBack.hover(function(){
        $(this).css('background',  'url(back.png) no-repeat 0 0');
    }, function(){
        $(this).css('background', 'url(back.png) no-repeat -70px 0');
    });
    $(window).scroll(function(e){
        //当滚到的高度超过浏览器可视区域的高度
        if($(window).scrollTop() > $(window).height()){
            $goBack.fadeIn(1000);
        }else{
            $goBack.fadeOut(1000);
        }
    });
});

这个版本不是最好的，只是简单的实现了下下。希望各位大家指点下下。

转载于:https://www.cnblogs.com/bettermaple/p/4225035.html