Go Top

#程式語言、#Blogger文頁崁入回到頂端

 吸收整理後，常常發現東西太多，有個「回到頂端」、看首段分類的小工具，會方便許多。
<2015mar.20<在網頁(blogger)中加入回到網頁頂端的浮動按鈕 ~ PJCHENder>>
<2014aug.12<怎麼幫blogger加入回到頁面頂端的按鈕 | 青椒的家>本版適用>
<2013aug.29< 快速回到頂端(Go Top)按鈕__符合使用者體驗＠WFU BLOG>>
<2011sep.12<網頁中做一個 「"TOP（回頂端）" 可以放大的浮動按鈕」@ Holling Hsu>

一、載入jQuery函式庫：在範本裡的 標籤中任意位置加入以下程式碼，如此我們的網站就可以使用jQuery的功能了。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script> 

二、加入HTML程式碼：在範本中搜尋 ，在下方加入以下程式碼。因為不想在行動版顯示這個按鈕，所以加入了頭尾的判斷式。

<b:if cond='data:blog.isMobile'>  <!-- gotop在mobile不顯示的html語法 -->
<b:else/>
<div id='gotop' ><center>&#65087;</center>Top</div>  <!-- gotop的html語法 -->
</b:if> 

三、加入CSS程式碼：在範本裡的 標籤之間加入以下程式碼。想要調顯示的位置可以調right和bottom的值，right是指離頁面右邊邊緣多少距離；同理，bottom是指離底部多少距離。

<style type='text/css'>
<!--
#gotop { /* gotop的css語法 */
    z-index: 1;
    display: none;
    position: fixed;
    right: 90px;
    bottom: 25px;
    padding: 10px 15px;  
    font-size: 15px;
    background: #777;
    color: white;
    cursor: pointer;
}
-->
</style>

四、加入jQuery程式碼：在第一步的程式碼下方加入jQuery程式碼，這個功能是用來讓按鈕出現以及點下按鈕能夠回到頂端。藍字的430可以依照自己需求調整，指的是距離頁面上面邊緣多少距離。想要按鈕在頁面滾到越下方才出現數值就越大。

<script type="text/javascript">
$(function(){
    $("#gotop").click(function(){
        jQuery("html,body").animate({
            scrollTop:0
        },700);
    });
    $(window).scroll(function() {
        if ( $(this).scrollTop() > 430){
            $('#gotop').fadeIn("fast");
        } else {
            $('#gotop').stop().fadeOut("fast");
        }
    });
});
</script>