如何用js和jQuery實現回到頁面頂部功能

這篇文章給大家分享的是有關如何用js和jQuery實現回到頁面頂部功能的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

HTML代碼：

<div class="main">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab amet debitis, dolore eveniet illo maiores nam neque nesciunt perspiciatis praesentium quaerat qui, quidem rem sequi similique sunt ullam voluptate voluptates!

</div>

//負責容納各種按鈕，例如“回到頁面頂部”，“掃面二維碼”等等
<div class="backContainer">
    <a href="#" id="backTop"></a>
</div>

CSS代碼：

*{margin:0; padding:0;}
a{color:#000; text-decoration:none;}
.main{width:100%; height:1500px;}
.backContainer{position:fixed; right:40px; bottom:40px;}
#backTop{display:block; width:46px; height:46px; background:url('p_w_picpaths/go-top.png') no-repeat 0 -100px;}
#backTop:hover{background-position-y:-150px;}

“回到頂部”按鈕及鼠標移入時效果截圖：

JS代碼：

$('.backContainer').hide();
$(window).scroll(function(){
    //當窗口相對于滾動條頂部的偏移大于150px時，顯示跳轉按鈕，否則不顯示
    if($(window).scrollTop() > 150){
        $('.backContainer').fadeIn('slow');
    }else{
        $('.backContainer').fadeOut('slow');
    }
});
//當點擊跳轉按鈕時
$('#backTop').click(function(){
    $('html').animate({
        scrollTop:0
    },1000);
})

scroll([[data],fn]): 

當用戶滾動指定的元素時，會發生 scroll 事件。  

scroll 事件適用于所有可滾動的元素和 window 對象（瀏覽器窗口）。

$(window).scroll( function() { /* ...do something... */ } );

animate(params,[speed],[easing],[fn])

用于創建自定義動畫的函數。  這個函數的關鍵在于指定動畫形式及結果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性（如“height”、“top”或“opacity”）。注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left. 

// 在一個動畫中同時應用三種類型的效果

$("#go").click(function(){   

    $("#block").animate({      

        width: "90%",     

        height: "100%",      

        fontSize: "10em",      

        borderWidth: 10   

            }, 1000 );

 });

scrollTop([val])

獲取匹配元素相對滾動條頂部的偏移, 此方法對可見和隱藏元素均有效。

感謝各位的閱讀！關于“如何用js和jQuery實現回到頁面頂部功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！