「href="#link"」のようなページ内リンクを無効にし、クリックするとスムーズなスクロールで移動するaタグをJSで実装しました。
jQueryなしで実装しています。
この手のサンプルはaタグに「id」を設定するものが多くて汎用性に欠けるので、「class」で使えるようにしました。
ページ内リンク
<a href="#demo_link" class="demo_scroll_btn">ページ内リンク</a>
スクロールするためのスペース
height:800px;
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' }); }); }