回到頂部效果

js實現返回頂部效果的解決方案

一、純js,無動畫版本

window.scrollTo(x-coord, y-coord); 
 
window.scrollTo(0,0);  

二、純js，帶動畫版本

生硬版：

var scrollToTop = window.setInterval(function() {
    var pos = window.pageYOffset;
    if ( pos > 0 ) {
        window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
    } else {
        window.clearInterval( scrollToTop );
    }
}, 16); // how fast to scroll (this equals roughly 60 fps)

流暢版：

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();

三、jQuery,帶動畫版本

首先須要在頂部添加以下html元素：

<span style="font-size:14px"><p id="back-to-top"><a href="#top"><span></span>返回頂部</a></p></span>  

其中a標籤指向錨點top，能夠在頂部防止一個 <a name="top"></a>的錨點，這樣在瀏覽器不支持js時也能夠實現返回頂部的效果了。

要想讓返回頂部的圖片顯示在右側，還須要一些css樣式，以下：

p#back-to-top{
    position:fixed;
    display:none;
    bottom:100px;
    right:80px;
}
p#back-to-top a{
    text-align:center;
    text-decoration:none;
    color:#d1d1d1;
    display:block;
    width:64px;
    /*使用CSS3中的transition屬性給跳轉連接中的文字添加漸變效果*/
    -moz-transition:color 1s;
    -webkit-transition:color 1s;
    -o-transition:color 1s;
}
p#back-to-top a:hover{
    color:#979797;
}
p#back-to-top a span{
    background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px;
    border-radius:6px;
    display:block;
    height:64px;
    width:56px;
    margin-bottom:5px;
    /*使用CSS3中的transition屬性給<span>標籤背景顏色添加漸變效果*/
    -moz-transition:background 1s;
    -webkit-transition:background 1s;
    -o-transition:background 1s;
}
#back-to-top a:hover span{
    background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px;
}

上面樣式中的背景圖片是雪碧圖，下面提供兩個單獨的返回頂部圖片方便朋友們使用：

   

有了html和樣式，咱們還須要用js控制返回頂部按鈕，在頁面滾動時漸隱漸現返回頂部按鈕。

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script>
$(function(){
        //當滾動條的位置處於距頂部100像素如下時，跳轉連接出現，不然消失
        $(function () {
            $(window).scroll(function(){
                if ($(window).scrollTop()>100){
                    $("#back-to-top").fadeIn(1500);
                }
                else
                {
                    $("#back-to-top").fadeOut(1500);
                }
            });

            //當點擊跳轉連接後，回到頁面頂部位置
            $("#back-to-top").click(function(){
                //$('body,html').animate({scrollTop:0},1000);
        if ($('html').scrollTop()) {
                $('html').animate({ scrollTop: 0 }, 1000);
                return false;
            }
            $('body').animate({ scrollTop: 0 }, 1000);
                 return false;            
           });       
     });    
});
</script>

這樣就能夠了。

注意在載入頁面後須要向下拖動一點滾動條才能夠看到返回頂部的效果圖。