用途
新着
履歴
分類

JS ページ内スムーズリンク

JS ページ内スムーズリンク
jQueryを使わずにページ内リンク(アンカーリンク)で滑らかに移動するリンクのサンプルです。

「href="#link"」のようなページ内リンクを無効にし、クリックするとスムーズなスクロールで移動するaタグをJSで実装しました。

jQueryなしで実装しています。

この手のサンプルはaタグに「id」を設定するものが多くて汎用性に欠けるので、「class」で使えるようにしました。


ページ内リンク
<a href="#demo_link" class="demo_scroll_btn">ページ内リンク</a>
スクロールするためのスペース
height:800px;
<div id="demo_link">ここまでスクロールします</div>

以上が実行サンプルです。

JSはこちら

    //classを取得
    const el = document.getElementsByClassName('demo_scroll_btn');

    for(let i = 0; i < el.length; i++){
        el[i].addEventListener('click', function(e) {   
            //クリックイベントをキャンセル
            e.preventDefault();

            //aタグの#以降を取得
            eid = el[i].href.match(/[#][A-Za-z0-9ー._-]+/gm)[0].slice(1);

            //そのidのtop位置を取得
            const eidTop = document.getElementById(eid).getBoundingClientRect().top + window.pageYOffset ;

            //その位置までスムーズにスクロール
            //-100はこのサイトのデザイン上の調整
            window.scrollTo({
                top: eidTop -100,
                behavior: 'smooth'
            });
        });
    }
公開 2022-06-26 14:25:25
更新 2022-07-20 21:32:10
このページの二次元コード
JS ページ内スムーズリンク

人気のサンプル

search -  category -  about
© 2024 kipure
Top