以前曾經利用浮動式廣告/工具列的功能，在部落格上作過類似的Back To Top (Scroll To Top)的按鈕，那時候是用CSS來製作，後來因為覺得不需要就拿掉了…那是2010年的事囉…不需要的原因很簡單，一來我的文章沒有這麼長到要用到回到上方的按鈕，滑鼠滾輪給他滾一滾還算可以，長一點的文章，其實也只要按鍵盤上的HOME就可以回到頁面的最頂端。Back To Top的Button是英雄無用武之地。
2013年的現在，我寫的文章愈來愈長，而平板電腦用戶愈來愈多，沒有滑鼠給他滾、沒有鍵盤給他HOME，總是要提供個按鈕給瀏覽者按，所以又重新做了一次。
這次當然還是用到超連結(不然哩)，CSS美化了一下，再利用JQUERY提供的現成的一些功能，製作了動態的回到上方按鈕(Dynamic Scroll To Top Button)，如下圖，右下角的「▲回到上方▲Scroll to Top」就是了。
重點在於「動態」：
如果瀏覽畫面一開始就在最上方，按鈕是不會出現的。
當瀏覽畫面到往下移動，按鈕會「浮現出來」而不是彈出來
再來是當按下按鈕時，畫面是「慢慢移動」到上方，而不是猛的跳到上面
如果瀏覽畫面一開始就在最上方，按鈕是不會出現的。
當瀏覽畫面到往下移動，按鈕會「浮現出來」而不是彈出來
再來是當按下按鈕時，畫面是「慢慢移動」到上方，而不是猛的跳到上面
怎麼完成呢？有興趣的話再往下看
CSS部分-按鈕的美化
<style type='text/css'>
#Dnow-ScrolltoTop {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
width:100px;
background-color: #EEEEEE;
background-color: rgba(238, 238, 238, 0.6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');
text-align:center;
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
color:#444;
text-decoration:none;
border:1px solid #C9C9C9;
}
</style>JQUERY部分-讓按鈕變動態
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "0") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == "0") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
$(function() {
$("#Dnow-ScrolltoTop").scrollToTop();
});
</script>HTML部分-在頁面上加上hyperlink
<a href='#' id='Dnow-ScrolltoTop' style='display:none;'>▲回到上方▲<br />Scroll to Top </a>
最後，佈置到Blogger上
為了顧及佈置到Blogger上的便利性，這次索性所有的功能都不用LINK的方式另外連結資源文件，全部都寫在一起。(如果是要把同樣樣式的Scroll To Top大量佈置到很多網頁的話，那麼用LINK的方式比較好處理)。至於Blogger上哪裡可以同時又放HTML、JavaScript、CSS呢？當然是在<body>裡啦。
編輯HTML的功能在Blogger的設計頁面中，二點要注意的：
1、編輯前勾選「展開小裝置範本」，以免寫在不該寫的地方
2、注意要放在</body>以前，避免網頁Render時因這支小咖程式碼卡住。
1、編輯前勾選「展開小裝置範本」，以免寫在不該寫的地方
2、注意要放在</body>以前，避免網頁Render時因這支小咖程式碼卡住。
感恩無私 分享,謝謝
回覆刪除阿彌陀佛