[jQuery]ヘッダー固定時のページ内リンク+外部アンカーリンク処理

WEB

2021.04.14 2018.08.01

検索して拾ったもの、間違ってたり足りてなかったりでそのままじゃ動かないのばっかでもうほんと、アレですね。

Contents

1 ライブラリ
2 ページ内リンク
3 別ページからのアンカーリンク
4 まとめ

ライブラリ

一定以上のバージョンだと動かない。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

ページ内リンク

スムーススクロール込み。

$(function(){
    //ページ内スクロール
    var headerHeight = $('header').innerHeight();
    jQuery('a[href^=#]').click(function() {
        var speed = 500;
        var href= jQuery(this).attr("href");
        var target = jQuery(href === "#" || href === "" ? 'html' : href);
        var position = target.offset().top - headerHeight;
        jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
        return false;
    });
});

別ページからのアンカーリンク

「href=”xxx.html#***”」じゃなくて「href=”xxx.html?id=***”」で指定すること。

$(window).on('load', function(){
    var headerHeight = $('header').innerHeight();
    var url = $(location).attr('href');
    if(url.indexOf("?id=") !== -1){
        var id = url.split("?id=");
        var target = $('#' + id[id.length - 1]);
        if(target.length){
            var position = target.offset().top - headerHeight;
            jQuery('body,html').animate({scrollTop:position}, 400);
        }
    }
});

まとめ

「href=”xxx.html#***”」でもやれそうな気もするんだけど、修正するだけで疲れた。
その気になったら調べて試してみる。