[jQuery]同一ページ内でスムーズにスクロールさせる

同一ページ内のリンクをクリックしたときにスムーズにスクロールされるようにするには、次のjQueryのスクリプトを使用することができます。

$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
// Source: css-tricks

ここデモを見ることができます。

またはw3schoolsで提供されるスクリプトを使用することもできます。 詳細スクリプトとデモは、 この記事を参考にしてみてください。

WordPressでjQueryスクリプトを適用するには、 Enqueueをさせてくれるのプロセスが必要です（参照).

WordPress テーマでスムーズにスクロール（Smooth Page Scrolling）する機能を提供する場合もあります。 例えば、多目的 WordPress テーマの一つである Bridgeでワンページ（One-page）で構成する場合にスムーズにスクロールされる機能を利用することができます（参照). Xのテーマの デモページでも、このようなスクロール機能を確認することができます。

テーマでスムーズスクロール機能をサポートしていない場合は、上記のスクリプトをコピーして、jsファイルとして保存し、関数のファイルに jsファイルをフック（Enqueue）させると、同じ効果を得ることができます。 （注： WordPressは $를 jQueryのに置き換える正常に動作します。）