ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2020年11月15日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

同一ページ内のリンクをクリックしたときにスムーズにスクロールされるようにするには、次の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のに置き換える正常に動作します。)



コメントを残す

コメント