手書きスクリプトは、簡素な場合管理しやすく、かつ、グーグル先生が良い記事をパッとご紹介くれますよね。いつもお世話になっています。
でも、要件が絡み合ってくると、簡素なスクリプトでは賄いきれなくなってきます。。。
かつ、最近のウェブサイトはbootstrapがだいたい入っていますので、jQueryもだいたい入っていて、jQueryプラグインをサッと組み込めることが少なくありません。
…でも、あれもやっていてこれもやっていて…ご相談ごとに解消法は異なっている場合が多い気がします。
解決法を１度で確認できる記事が見つけられなかったので、まとめることにしました。
ページコンテンツ
:not()を指定して、非指定リンクアンカーを全てスクロール処理
この方法を実装する際のポイント
- ページ内リンクがすでにすでにたくさんある
- モーダル、タブ、アコーディオンなどは、今後増える見通しがない
// :not()を指定して、非指定リンクアンカーを全てスクロール処理
$(function(){
$('a[href^="#"]:not(.modal,a.flex-next,a.flex-prev)').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
ページ内リンクが既存で多く、モーダル・タブ切り替えなどは実装していないサイトに素早く実装できます。が、モーダル・タブ切り替え・アコーディオン・スライダー切り替えなど、リンクアンカーによる発火は、全て:not()へ記述が必要です。
指定クラスの場合のみ指定箇所（ページトップなど）へスクロール動作
この方法を実装する際のポイント
- スムーズスクロールは「ページ先頭へ」くらい
- モーダル、タブ切り替えなどが多い
// 指定クラスの場合のみ指定箇所（ページトップなど）へスクロール動作
$( '#move-page-top' ).click(
function()
{
$( 'html,body' ).animate( {scrollTop:0} , 'slow' ) ;
}
) ;
スクロールさせるaタグに、記述を追加【smooth-scroll.js】
新しくなったsmooth-scroll.jsを使ってみたら本気で使いやすいライブラリになってた – STROBOLIGHTS.tokyo ＜ストロボライツ＞
スクロールさせないaタグに、記述を追加【smoothScroll.js】
スムーズスクロールとモーダルウィンドウのアンカーリンクによる干渉 -ぼうびろく
<非js>CSSでスクロール[注：非対応ブラウザ多]
ページ内のスムーススクロールをCSSのみで実装する方法 – https://kuzlog.com/2018/01/09/2049/