jQuery-錨點動畫

提成績 傷感情〃發表於2020-11-21

jQuery-錨點動畫

什麼是錨點

錨點是網頁製作中超級連結的一種,又叫命名錨記。命名錨記像一個迅速定位器一樣是一種頁面內的超級連結,運用相當普遍。

錨點的作用

錨點是文件中某行的一個記號,類似於書籤,用於連結到文件中的某個位置。當定義了錨點後,我們可以建立直接跳至該錨點(比如頁面中某個小節)的連結,這樣使用者就無需不停地滾動頁面來尋找他們需要的資訊了。

下面我們來看一下我自己的github上面的網站 (可以點進去)

錨點演示

錨點的建立

如上圖紅色框所示 這4個圖示都是錨點連結

錨點連結的意思說就是:

“abc”就是一個連結,我點選“abc”之後,就會跳轉到"123"的位置上。

最常用的方式,在一個網頁的開頭,做一個目錄,每一個目錄都是一個錨點連結,然後連結到本頁面相關的位置。

錨點連結的語法

<a name="錨點的名字"></a>

意思是在網頁中的某一個位置,插入一個錨點

<a href="#錨點的名字">顯示的字樣</a>

意思是在網頁中的某一個位置連結之前設定的錨點,只要點選該連結,就會自動跳轉到錨點處。

href屬性的屬性值最前面要加 #

乾貨

咳咳! 主要不知道講啥了,直接上乾貨

  1. 給要進行錨點跳轉的 <a> 標籤加一個類 例: <a href="#haha" class="scroll">
  2. 獲取對應節點距離瀏覽器頂部的距離 例 : let haha = $('#haha').offset().top
  3. 給所有要錨點動畫的加上點選事件 例:$('.scroll').on('click',function())
  4. 其實到這已經完事了,寫完整點就是:
$(function(){
    $('.scroll').on('click',function(){//繫結點選事件
        let haha = $('#haha').offset().top;//獲取對應元素劇情螢幕頂部的距離
        $('html,body').animate({scrollTop:haha},800);//動畫出爐
    });
});

適用於頁面所有的動畫

還是給要進行錨點跳轉的 <a> 標籤加一個類 例: <a href="#haha" class="scroll">

程式碼如下:

$(function(){
    $('.scroll').on('click',function(){//繫結點選事件
        let tops = $(this).attr('href');//獲取物件
        $('html,body').animate({scrollTop:tops.offset().top},800);//動畫出爐
    })
})

簡化:

$(function(){
    $('.scroll').on('click',function(){
        $('html,body').animate({scrollTop:$(this).attr('href').offset().top},800);
    })
})

相關文章