jQuery1.12.0以降でのスムーススクロール

LINEで送る

f:id:mmnc:20170318005630j:plain

最近、jQuery1.12.1を使おうとしたら、1.9.1までで動いていたスムーススクロールが動かなくなっていたのでさっくりメモしておく。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
$(function(){
    $('a[href^="#"]').click(function() {
        var speed = 400;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        $('body,html').animate({scrollTop:position}, speed, 'swing');
            return false;
        });
    });
});

セレクタの書き方が少し変更になったため、今までの $('a[href^=#]') ではなく、 $('a[href^="#"]')と書いてあげる必要があるらしい。

このブログでもこのスムーススクロールをつかっているけれど、やっぱりこういうちょっとしたアニメーションだけでちょっといいサイトっぽく見えるからいいなあ。