效果如連結：http://liuyanzhao.com/
只需要i兩個步驟：
1.我們在網頁body內最上面新增一個，方便跳到這個位置

<span  name="gotop"></span>

2.在網頁的末端新增一個：

   <a href="#gotop" >
       <img src="__PUBLIC__/img/backTop.png" id="gotop" alt="" style="position: fixed;bottom: 10px;display: none;">
   </a>

為了讓它頁面已經在首部時，圖示隱藏

加一段js程式碼：

<script>
    $(function () {
        $(function(){
            $(window).scroll(function(){
                if($(window).scrollTop() > 100){
                    $("#gotop").fadeIn(1000);//一秒漸入動畫
                }else{
                    $("#gotop").fadeOut(1000);//一秒漸隱動畫
                }
            });

            $("#gotop"
 
).click(function(){
                $('body,html').animate({scrollTop:0},1000);
            });
        });
    });
</script>

轉載請註明