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