フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

【スムーススクロール / ページ内リンク】smooth-scroll.js使い方 v14.2.1

2年くらい前からsmooth-scroll.jsを使っていたのですがバージョンアップしたら動かなくなったのでメモ

このjsはページ内リンクをスムーススクロールにするjsです。
jQueryがなくても動きますがこの記事にはjQueryを使用した記述が一部あります。

読み込み

html
<script src="assets/js/smooth-scroll.js"></script>

ページ内リンク設定

普通に#xxxとhrefに普通に記述

html
<a href="#link">リンク</a>

<p id="link">リンク先</p>

実行

以下のように記述[data-scroll]は無くても動きます。
offsetはスムーススクロール後の上の余白です。
※50なら上に50pxの余白

javascript
var scroll = new SmoothScroll('a[href*="#"], [data-scroll]',{
  offset: 50
});

以上、すごく簡単に実装できます!

オプションは他にもいっぱいあるので
ご確認ください!

スマホとPCでoffsetを変える

スマホとPCでスムーススクロール後の上部の余白を変えたい場合があると思います。
下記のように実装できます。
例:ブレイクポイント768px スマホで50px PCで30pxのoffset
※jQueryを使用しています

javascript
//windowサイズでモバイル判定
var isMobile = function(size){
  return $(window).width() <= size ? true : false
}

var scroll = new smoothScroll('a[href*="#"], [data-scroll]',{
  offset: isMobile(768) ? 50 : 30
});

旧バージョンの記述

どのバージョンかはわからなくなりましたがメモとして残します
以下、僕が使用していた記述です
※現バージョンの方が記述量が少なくわかりやすいです

html
<a href="#link" data-scroll>リンク</a>

<p id="link">リンク先</p>

javascript
//windowサイズでモバイル判定
var isMobile = function(size){
  return $(window).width() <= size ? true : false
}

//アンカーリンクの場合data-scrollをつける
$("a[href*='#']").each(function(){
  var href = $(this).attr('href');
  if(href && href !== "#") {
    var id = href.substring(href.indexOf("#"),href.length);
    if(($(id).length)){
      $(this).attr('data-scroll', '');
    }
  }
});

// data-scrollがついているものはスムーススクロール
smoothScroll.init({
  speed: 500,
  offset: isMobile(768) ? 50 : 30
});
[紹介元] jQueryタグが付けられた新着投稿 – Qiita 【スムーススクロール / ページ内リンク】smooth-scroll.js使い方 v14.2.1

コメント

記事に戻る

コメントを残す