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

WEB

2021.04.14

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

はじめに

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

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」をどうやって取得するかを都度考えないといけない。言い換えたらそれさえやれば使える。