2016年5月4日 星期三

Blogger 新增回到最上層功能



最近有一個瀏覽網頁的習慣,當頁面捲到下方時,會搜索頁面中的「回到頂端」按鈕。其實越來越多網站會加入這個功能,例如T客邦...等大型的資訊網站...等。這些網站的瀏覽經驗讓我養成了按「回到頂端」的習慣,也許也有人發現了自己不小心養成了這個習慣...



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

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


二、加入HTML程式碼
在範本中搜尋<body>,找到之後在它的下面加入以下程式碼。因為不想在行動版顯示這個按鈕,所以加入了頭尾的判斷式。

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


三、加入CSS程式碼
在範本裡的"<head></head>"標籤之間加入以下程式碼。

<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>


想要調顯示的位置可以調right和bottom的值,right是指離頁面右邊邊緣多少距離;同理,bottom是指離底部多少距離。若是對CSS熟悉的話還可以進一步調整版型。


四、加入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>




本文內容轉載自青椒的家

0 意見: