jQuery-錨點動畫

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);
    })
})