HaradaWeb > jQuery > スムーススクロールをjQueryで設定

スムーススクロールをjQueryで設定

更新日:2019年9月22日 | 投稿日:2018年11月3日

スムーススクロールをWordPressのプラグインを使わずにjQueryで設定します。
参考にさせていただいたサイトに感謝します。

ページ内リンク

プラグインで良いのでは

WordPressでもスムーススクロールのプラグインはあります。
それで良いのではないかと思います。
実際このHaradaWebのサイトでもプラグインを使ってスムーススクロールを設定していました。

しかしプラグインによってはページ内のリンクによる移動を、hタグ(h2やh3)の見出しの手前で止めることはできず、サイトメニューを画面のトップ位置に固定している場合、hタグがメニューの下の隠れてしまう事があります。

又競合しているプラグインによっては反発してしまって動きがおかしくなる時があります。

hタグの見出しが見えるように

プラグインでhタグの手前で止めるには、CSSを細工すれば止められます。
hタグ内にspanを入れてそこに下記のCSSを設定します。

margin-top: -5rem;
padding-top: 6rem;

しかしこれはお勧めできません。
このCSSを設定すると前の要素の上にこのCSSが乗っかってしまって、前の要素が正常に動作しません。

jQueryで手前で止める

プラグインを使わず、自分でjQueryを設定します。

jQuery(function(){
	var headerHight = 100;
   jQuery('a[href^=#]').click(function() {
	  var speed = 400;
	  var href= jQuery(this).attr("href");
	  var target = jQuery(href == "#" || href == "" ? 'html' : href);
	  var position = target.offset().top-headerHight;
	  jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
	  return false;
   });
});

他のjQueryの邪魔をしない様にと考えると設定するのはフッターphpの「body」
閉じタグ直前が良いのではないかと思います。

TOP