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

jQueryを使用して、アンカーリンククリックするとスムーズにスクロールされるようにする

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

アンカー(anchor)リンクでページ内でスクロールするようにリンクを作成した場合、リンクをクリックしたときにスムーズにスクロールされるようにするには、次のようなjQueryのスクリプトを使用することができます。

$('a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
// Source: stackoverflow

特定の要素に限定するには、$('a')部分にその要素を追加するだけです。 上記のコードをそのまま使用した場合、一部のjsコードと競合が発生するか、一部のリンクが正しく動作しないため、要素を特定して使用してみるとうまく動作します。

上記のコードがうまくいかないと、次のようなjQueryのスクリプトも可能です。

$('a[href*=#]').on('click', function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});

参考までに WordPressでjQueryを使用するには、 エンキューを介してjsファイルをフックしなければなり、$の代わりにjQueryを使用します。



2のコメント

コメント

  1. WordPressをしながら難しかった点を、ここで多くを学ん行きますね! 良い内容もよく読んでいます! ありがとうございます????

    応答