[ html5 / js / jquery ] 網頁設計goTop按鈕滑至頂端，按鈕撰寫製作,scroll to top,back to top button,

hi大家好我流加尾

今天要來分享專案非常會使用到的scroll to top按鈕
不管是PC,PAD,Mobile都會遇到客戶需要增加這功能
非常實物的網頁設計功能...



首先在head前面載入外部的js控制動態

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

然後再放入go top的div物件
<div id="gotop">go top</div>


然後再幫go top加上css
#gotop {
/*go to top btn css*/
display: none;
position: fixed;
right: 20px;
bottom: 20px;
padding-top: 20px;
padding-bottom:12px;
font-size: 20px;
background-color: #0cac00;
color: white;
cursor: pointer;
width: 70px;
height: 30px;
text-align: center;
}

最後再幫go top div加上js動態以及判斷(以下是js)

$(function(){
//control display of goTop button and motion
    $("#gotop").click(function(){
        jQuery("html,body").animate({
            scrollTop:0
        },1000);
    });
    $(window).scroll(function() {
        if ( $(this).scrollTop() > 150){
            $('#gotop').fadeIn("fast");
        } else {
            $('#gotop').stop().fadeOut("fast");
        }
    });
});

大致上就完成了
我有幫大家寫好demo的打包檔
下載就可以使用
希望能對大家網站專案開發有幫助
(註:這的code撰寫也是網頁看外國大大學著寫的)

<<下載demo檔案 / download html demo file>>


如果覺得我的文章有幫助
請你點右邊的FB加入訂閱 我會在粉絲團不定期分享新資訊
也歡迎交流！謝謝 阿特底賽粉絲團
https://www.facebook.com/artdesigntw