介紹個人網誌上的網頁捲動TOP

這個TOP功能，應該大家都很熟悉了，就是網頁很長時方便你一按就快速回到網頁上端。

常見的是使用連結標籤 A 來做，如<a id="top_of_body"></a>，然後連到#top_of_body位址去，
個人不喜歡這用法，所以另外找了其他方式來達成。

我把它分成2部份來寫，首先是在範本HTML裡BODY內的最上端插入一個div目標元素，id='body_TOP' 。

<div id='body_TOP' style='width: 100%; height: 0px;'/>

然後在版面配置裡的sidebar-left-1區塊內加入 HTML/JavaScript 小工具，標題留空不顯示任何東西。

<div id="div_goTOP" style="width: 80px; height: 50px; position: fixed; top: 85%; left: 90%; z-index: 15; text-align: center; font-size: 28px; background-Color: rgba( 55, 57, 68, 0.3); cursor: pointer;" onclick="javascript:document.getElementById('body_TOP').scrollIntoView(1);" >
TOP
</div>
<script type="text/javascript" async>
if( isMyMobile == 1 )  {
  if( document.getElementById( "div_goTOP" ) )  {
    var divTP = document.getElementById( "div_goTOP" );
    divTP.style.width = "40px";
    divTP.style.height = "30px";
    divTP.style.fontSize = "16px";
  }
}
</script>

這邊弄了個固定位置的div，id="div_goTOP" ，讓我們看一下裡面的STYLE設定，z-index: 15;根據自己網頁狀況調整，background-Color: rgba( 55, 57, 68, 0.3); 使用這樣的顏色格式來達成背景半透明又不影響顯示的字，參數前3個是顏色值，第4個則控制透明度，cursor: pointer;讓滑鼠游標顯示手狀，onclick="javascript:document.getElementById('body_TOP').scrollIntoView(1);" 這讓div接受點擊時執行javascript，將id為'body_TOP' 的元素捲動到視野內。

另外有一小段javascript則是我還不太懂手機版的模板css的自適應調整，只好另外費工夫去調整寬、高、字體大小，讓它在手機畫面上看的較順眼，這段不影響功能可移除。

大致上就是如此作法，追求品質的人應該會想用平滑捲動方式，網路上應該很容易可以找到寫法，我的話目前保持輕量作法就好。