返回頂部功能jquery實現代碼

fg360 11年前發布 | 1K 次閱讀 JavaScript jQuery

當窗口在第一屏時不顯示返回頂部，滾動到第二屏是現實返回頂部，點擊后平滑滾輪回到頂端。 

$(document).ready(function() {



// hide #back-top first
$("#back-top").hide();

// fade in #back-top
$(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            $('#back-top').fadeIn();
        } else {
            $('#back-top').fadeOut();
        }
    });

    // scroll body to 0px on click
    $('#back-top a').click(function() {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
});




});


HTML USAGE:


<p id="back-top" style="display: block; ">
   <a href="#top"><span></span><em>Back to top</em></a>
</p>
</pre>
 本文由用戶 fg360 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！