[Blogger HACK] 提供使用者閱讀方便的"回到上層"按鈕整合

很多部落格的文章的內容愈來愈長時，
都會提供回到最上層的按鈕供使用者快速捲到最上層。
想要快速整合嗎?
可以參考這篇文章
http://www.allbloggertricks.com/2013/04/scroll-to-top-jquery-button-for-blogger.html (這網站超多blogger的技巧可以參考!!)



這個網誌提供的方法就是寫一個go to top的jQuery外掛，這樣你也不用引入外部的javascript檔，可以無痛設定。

修改細節請參考這篇說明: [Blogger HACK] 套用Bootstrap的選單導航列

Step1: 加入go to top的樣式，請參考以下擷圖

程式碼:

<style type="text/css">
#abt-Top {
    -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=&#39;
    #99EEEEEE&#39;,EndColorStr=&#39;#99EEEEEE&#39;);text-align: center;
    padding: 5px;
    position: fixed;
    bottom: 100px;
    right: 100px;
    cursor: pointer;
    color: #444;
    text-decoration: none;
    border: 1px solid #C9C9C9;
}
</style>

Step2: 加入jQuery、外掛程式碼、按鈕的HTML

程式碼:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>
<script src='//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
    $.fn.scrollToTop = function() {
        $(this).hide().removeAttr(&quot;href&quot;);
        if ($(window).scrollTop() != &quot;0&quot;) {
            $(this).fadeIn(&quot;slow&quot;)
        }
        var scrollDiv = $(this);
        $(window).scroll(function() {
        if ($(window).scrollTop() == &quot;0&quot;) {
        $(scrollDiv).fadeOut(&quot;slow&quot;)
        } else {
        $(scrollDiv).fadeIn(&quot;slow&quot;)
        }
    });
    $(this).click(function() {
        $(&quot;html, body&quot;).animate({
        scrollTop: 0
        }, &quot;slow&quot;)
    })
  }
});

$(function(){
    $(&quot;#abt-Top&quot;).scrollToTop();
});

</script>
<!-- Scroll to Top Plugin for Blogger by www.allbloggertricks.com-->
    <a href="#" id="abt-Top" style="display: none;">回到最上層 :D </a>