iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
自我挑戰組

30天後能否自己做出一個簡單便利的訂便當系統(HTML、CSS、BootStrap、PHP、SQL、JavaScrip、JQuery)系列 第 26

鐵人賽 Day26 -- 一定要知道的JQuery (二) -- 錨點動畫

JQuery-錨點動畫

什麼是錨點 & 錨點的作用是什麼

他是超連結的一種,可以幫助我們更快速的尋找我們所要的資訊,
就不用一直滾動頁面來尋找我們所要的資訊了

我在網路上找到一個別人做的網頁,
https://huangkaisong.github.io/ --> 點進這個網址來試玩看看錨點的功能
https://ithelp.ithome.com.tw/upload/images/20210925/20141189t6mz5X4s06.png

基本語法

在網頁的某一個位置中,插入一個錨點(隨至隨你放,看你要讓錨點在哪)

<a name="abc"></a>

只要點選,就會自動跳到剛剛上面所設定的錨點位置

<a href="#abc">顯示的字樣</a>

範例

完整程式碼長這樣

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

這樣就可以做出我們的錨點動畫啦
那我們鐵人賽Day27見囉!!


上一篇
鐵人賽 Day25 -- JavaScript 初體驗(三) -- 建構子
下一篇
鐵人賽 Day27 -- CSS動畫 animation -- @keyframes
系列文
30天後能否自己做出一個簡單便利的訂便當系統(HTML、CSS、BootStrap、PHP、SQL、JavaScrip、JQuery)30

尚未有邦友留言

立即登入留言