jQuery 操作 DOM 並 scrollTop 跳轉至指定位置

前言

有時候我們在點連結並跳轉到下個頁面後
會想要同時做兩件事
分別是

1. 更變指定DOM的狀態: 如換色
2. 移動頁面到指定的位置

上述兩件事
若分開處理都不困難
以第2項來說 只要在 URL 後面加#就可以了

比如說 下面這個頁面
https://lol.gamepedia.com/Kobbe
若我們要看 Kobbe 這位仁兄的戰果
只要在 URL 後面加上 #Tournament Results 如下
https://lol.gamepedia.com/Kobbe#Tournament_Results
就可以達成了

但若我們以上兩件都要完成
而且只能用 URL 來傳遞指定要變更的DOM及位置所需要之參數的話呢?

下面就來說說我的作法

作法

一、HTML

在 html 標籤裡塞兩個 Hash
並用 & 來隔開

例:

<div class="test">
    <a href="https://lol.gamepedia.com/Kobbe#Tournament_Results&#media1"></a>
</div>

這邊是要讓頁面跳到 id = "Tournament_Results" 的位置
並讓 id = "1" 的div變紅色

二、完成js部份

js我們就可以寫

$(function(){
    var hash = $(location).attr('hash'); // 使用 location function 來取得 #xxxx
    var tabid_t = hash.split('&'); // 使用 split function 來切開 #xxxx
    if (tabid_t.length > 1) { // 考慮到其他可能只傳一個 #xxxx 的情形 所以先判斷 length 是否大於 1
        var tabid = tabid_t[1].replace('#media', ''); // 若是 把第1筆拿出來 而且我只要後面的id 所以用 replace function 來把 #medila 拿掉
        $('#'+tabid).addClass('red'); // 接著就可以把 id = "1" 的 div 給加一個 class 讓它變紅色了 
        $('html, body').scrollTop($(tabid_t[0]).offset().top); // 同時我們使用 scrollTop function 來移動視窗至指定位置 在這邊是移到第0筆資料的位置
    } else {
        var tabid = hash.replace('#media', '');
        $('#'+tabid).addClass('red');
    }
});

這樣子就完成囉!

另外
若在滾動畫面的時候要有滑動的效果的話
可以改成以下 function

$('html, body').animate({
    scrollTop: $(tabid_t[0]).offset().top
}, 2000); // 2000 是指滾動的秒數

參考資料

https://stackoverflow.com/questions/19012495/smooth-scroll-to-div-id-jquery/22455323
https://border0902.pixnet.net/blog/post/345456517