[jQuery3対応]ヘッダー固定・非固定対応スムーススクロール

自分の過去の記事に踊らされてしまった。

はじめに
最終形
20221219追記：改良版

はじめに

当ブログでスムーススクロール（ページ内リンク）に言及した記事は既にいくつかある。

jQueryのバージョンによって動かないとかどうのこうのに関しては一部修正で大体なんとかなる。

//旧版
$('a[href^=#]').click(function(){
//現行版
$('a[href^="#"]').click(function(){

で、今回はひと手間加えて便利にやっていく。

最終形

jQuery3系でちゃんと動きます。

$(function(){
    //scroll
    $('a[href^="#"]').click(function(){
        var headerHeight = 0;
        if($('header').hasClass('sp')){
            headerHeight = $('header.sp').innerHeight();
        }
        var speed = 500;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top - headerHeight;
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
})

通常のスムーススクロールに加えて、「headerに.spがついている場合はheaderの高さを取得して移動距離をその分削る」を書いてある。PC用のデザインではheaderは追従しないけどSPのときは追従する、って場合用。PCだろうがSPだろうがheaderが追従するならif無しで取得しちゃえばいいですね。

汎用性をもたせたいんだけどPC/SPの切替はコーディングによって異なるんで何で発火していいかは組み方によってしまうから無理だわ。この「.sp」だって他のjsの記述で付与してるし。ともかくは、「headerHeight」をどうやって取得するかを都度考えないといけない。言い換えたらそれさえやれば使える。

20221219追記：改良版

PC（768px以上）だとヘッダーを非固定、スマホだとヘッダーを固定する場合。

$(function(){
    $('a[href^="#"]').not('a.notscroll').not('a.damedayo').click(function(){
        var speed = 500;
        var headerHeight = 0;
        if(window.matchMedia('(max-width:767.98px)').matches){
            headerHeight = $('header').innerHeight();
        }
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top - headerHeight;
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
});

要はヘッダー分の調整に必要な数値の指定をいつどうやって加えるかってことで。

.matchMedia()を使えば単純にブラウザ幅で切り替えられるから、こっちのほうが楽だと思う。