如何用js和jQuery實(shí)現(xiàn)回到頁面頂部功能

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

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>

//負(fù)責(zé)容納各種按鈕，例如“回到頁面頂部”，“掃面二維碼”等等
<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;}

“回到頂部”按鈕及鼠標(biāo)移入時(shí)效果截圖：

JS代碼：

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

scroll([[data],fn]): 

當(dāng)用戶滾動指定的元素時(shí)，會發(fā)生 scroll 事件。  

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

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

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

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

// 在一個(gè)動畫中同時(shí)應(yīng)用三種類型的效果

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

    $("#block").animate({      

        width: "90%",     

        height: "100%",      

        fontSize: "10em",      

        borderWidth: 10   

            }, 1000 );

 });

scrollTop([val])

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

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