程式碼總共分4個部分，分別是載入jQuery函式庫、HTML程式碼、CSS程式碼和jQuery程式碼。( 強烈建議在修改blogger範本前事先備份範本 )
一、載入jQuery函式庫
在範本裡的"<head></head>"標籤中任意位置加入以下程式碼，如此我們的網站就可以使用jQuery的功能了。
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
在範本中搜尋<body>，找到之後在它的下面加入以下程式碼。因為不想在行動版顯示這個按鈕，所以加入了頭尾的判斷式。
<b:if cond='data:blog.isMobile'> <!-- gotop在mobile不顯示的html語法 -->
<b:else/>
<div id='gotop' ><center>︿</center>Top</div> <!-- gotop的html語法 -->
</b:if>
在範本裡的"<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>四、加入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>
放完程式碼趕緊按儲存範本，到自己的網站去看看有沒有出現按鈕吧。
No comments:
Post a Comment