[Blogger筆記] 用jQuery為錨點加上滾動特效

前幾天更新以前寫的教學文時
突然想到其實可以用錨點來加強使用者體驗
實際使用之後發現單純用錨點跳來跳去反而更煩
後來在stack overflow上看到用jQuery的解決方案
所以做個小筆記順便分享一下
 Demo網頁

Step 0 錨點 Anchor

超連結的一種, 可以幫助讀者定位到文章中某個區塊
最常見的地方就是Wiki的目錄

而Blogger本身雖然沒有這種語法
不過是可以實現的

Step 0 #1 下錨點

和一般的html寫法一樣, 用id或name

<a name="a">A</a>

<a id="a">A</a>

中間的文字非必要

Step 0 #2 定位錨點

用超連結定位到錨點, 寫成

<a href="#a">定位到A</a>

但這段如果從HTML模式切換到撰寫模式會自動被blogger修正掉
如果要避免這種狀況可以用Blogger內建的超連結

Step 1 jQuery

首先先確定有沒有裝過jQuery

沒有的話插入以下code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Step 2 滾動特效

插入以下code
來源: StackOverflow

<script>
$(function() {
 $('a[href*="#"]:not([href="#"])').click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    if (target.length) {
   $('html, body').animate({
     scrollTop: target.offset().top
   }, 1000);
   return false;
    }
  }
 });
});
</script>

Step 3 修正

如果網頁本身的go Top功能也是用錨點寫的

安裝上面的code會出現問題

所以必須在判斷式中多加一個條件把#top排除

<script>
$(function() {
 $('a[href*="#"]:not([href="#"])').click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname && this.hash.slice(1) != 'top') {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    if (target.length) {
   $('html, body').animate({
     scrollTop: target.offset().top
   }, 1000);
   return false;
    }
  }
 });
});
</script>

17.9.18
Sean Chaox

About Sean Chaox

I'm soulless, so I'm recompiling my soul
I'm lifeless, so I'm enriching my life
I'm homeless, so I build this House
I am Sean, welcome to my House