ねはぴれ

ページ内リンク

ページ内リンクのやり方・スムーズスクロール・urlを変えない方法・ずれるときの対処法を紹介します。

目次

やり方

id属性のある要素を作り、aタグのhref属性に「#id名」と指定することでページ内にリンクさせることができます。

<a href="#here">link</a>
<p id="here">here!</p>

よくサイトのヘッダーとかに使われていますね。

このサイトの「目次」にも使っています。

スムーズスクロール

さっきのページ内リンクでは、aタグを押したらリンク先にパッと瞬間移動のように移動しました。


ですが、それだとページのどこら辺に移動したのかが分かりずらいです。
そこでスムーズスクロールを使います。


やり方は簡単でhtmlタグに次のコードを追加するだけです。

html {
	scroll-behavior: smooth;
}

scroll-behaviorの初期値はautoです。

これでユーザビリティが向上しましたね。

urlを変えない

例えばhttps://nehapire.comに次のようなコードがあったとします。

<a href="#about">about</a>

これをクリックした時、urlはこのようになります。

https://nehapire.com#about

ここでブラウザの戻るボタンを押すと、https://nehapire.comに戻り、「そのもう一個前のページに戻りたいのに」と思うことがありました。


なので次のjavascriptのコードでurlを変えないようにしました。

document.addEventListener("DOMContentLoaded", function() {
	const e = document.querySelectorAll('a[href^="#"]');
	for (let n = 0; n < e.length; n++)
		e[n].addEventListener("click", function(e) {
			e.preventDefault();
			const n = this.getAttribute("href")
			  , t = "#" === n || "" === n ? document.documentElement : document.querySelector(n)
			  , o = t.offsetTop;
			window.scrollTo({
				top: o,
				behavior: "smooth"
		})
	})
})

処理の主な流れとしては、

DOMが読み込まれた後に、href属性の値が#で始まる全てのa要素を取得して、
クリックイベントを無効化し、href属性で指定されていた要素の位置を取得して、そこにスムーズスクロールする

といった感じです。

スムーズスクロールしたくないという方は、「behavior」の値を「smooth」から「auto」に変えてください。

document.addEventListener("DOMContentLoaded", function() {
	const e = document.querySelectorAll('a[href^="#"]');
	for (let n = 0; n < e.length; n++)
		e[n].addEventListener("click", function(e) {
			e.preventDefault();
			const n = this.getAttribute("href")
			  , t = "#" === n || "" === n ? document.documentElement : document.querySelector(n)
			  , o = t.offsetTop;
			window.scrollTo({
				top: o,
				behavior: "auto"
		})
	})
})

ずれる

今回は、ヘッダーがあるのにページ内リンクがずれる例を見ながら、対処法を紹介します。


まずは、こちらのページ内リンクがずれているサイトを見てください。

worksと書いてあるaタグをクリックすると、ヘッダーが重なった状態でオレンジのコンテナにリンクしてしまいます。


そこでscroll-padding-topプロパティを使います。

使い方は簡単でスムーズスクロールと同じように、htmlタグに次のように記述します。

html {
	scroll-padding-top: 50px;
}

「50px」のところにはヘッダーの高さを入れてください。

もう一度、worksと書いてあるaタグをクリックすると、ヘッダーがちょうど赤いコンテナに重なっているのが分かります。

これで直せました。

関連記事