AD
ページ内リンクでするする指定箇所まで移動する「スムーススクロール」。
いつも同じの使ってたんですが、最近になって見直したので、メモしておきます。
スムーススクロールはjQueryで実装してるんですが、時々移動した先で見出しの文字が見切れたり、ページ遷移+スクロール移動の時の挙動がイマイチだったことがあって。
自分なりにカスタムがしやすく、レスポンシブでも使えるように作ったのが以下のコードです。
※2020年3月9日にちょっと修正
スムーススクロール2020年版
<pre class="wp-block-syntaxhighlighter-code">/* smooth scroll */ $(window).on('load',function(){ var locUrl = location.href; var setHash = locUrl.split('#'); //現在のページURLに#が含まれる場合はスクロール移動 if(setHash<img class="ranking-number" src="https://memo.ark-under.net/wp/wp-content/themes/jin/img/rank01.png" />){ hashMove("#"+setHash<img class="ranking-number" src="https://memo.ark-under.net/wp/wp-content/themes/jin/img/rank01.png" />); } //#pagetop $('#pagetop a').on('click',function() { var href = $(this).attr("href"); var clkUrl = href.split('#'); hashMove("#"+clkUrl<img class="ranking-number" src="https://memo.ark-under.net/wp/wp-content/themes/jin/img/rank01.png" />); return false; }); //#から始まるリンクはスクロール $('a[href^="#"]').on('click',function() { var href = $(this).attr("href"); var clkUrl = href.split('#'); hashMove("#"+clkUrl<img class="ranking-number" src="https://memo.ark-under.net/wp/wp-content/themes/jin/img/rank01.png" />); }); //#を含むリンクは、リンク先と現在のページのURLを比較して判断 $('a[href*="#"]').on('click',function() { var href = $(this).attr("href"); var pageURL = location.pathname; reg = new RegExp(pageURL); //ページ名が同じならスクロール移動 if (href.match(reg)) { var clkUrl = href.split('#'); hashMove("#"+clkUrl<img class="ranking-number" src="https://memo.ark-under.net/wp/wp-content/themes/jin/img/rank01.png" />); } }); function hashMove(trg){ var position = $(trg).offset().top; if($('body').hasClass('admin-bar')){ position = position - 50; }else{ position = position - 20; } if($('body').width() <= 980){ position = position - 50; //見出しの文字が切れるのを防ぐ }else{ position = position - 150; //見出しの文字が切れるのを防ぐ } $('body,html').animate({scrollTop:position}, '800', 'swing'); } });</pre>
基本的にWordPressで使われることを想定しているので、hashMove() でもadmin-barのあるなし判定を追加してます。
ご入用の方はどうぞ。
LazyLoad系を使用している場合は注意
画像を読み込んでから要素位置を取得できるよう、$(window).on('load')
後に実行するようにしてますが、LazyLoad系プラグインやライブラリを使用している場合、要素位置がうまく取得できないようです。
この辺りをうまく回避する方法を考えていますが、何かいいアイディアがあれば教えてください_(┐「ε:)_
AD
AD
[…] くろひつじのメモ帳:https://memo.ark-under.net/memo/4571 […]