html回到頂部代碼


HTML代碼
<p id="back-to-top"><a href="#top">返回頂部</a></p>
CSS代碼
 p#back-to-top{
            position:fixed;
            display:none;
            bottom:100px;
            right:80px;
        }
js代碼
 $(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(){
                if ($('html').scrollTop()) {
                    $('html').animate({ scrollTop: 0 }, 100);//動畫效果
                    return false;
                }
                $('body').animate({ scrollTop: 0 }, 100);
                return false;
            });
        });
    });

  記得要引用jQuery文件


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM