全てのブラウザ向けにいいかんじにスムーススクロールを設定する

2019/2/23現在、スムーススクロール（このページのサイドバークリックしたときみたいなやつ）は、
・JavaScript(jQuery)
・CSS
のどっちかで実現します。

そう、CSSでもできるのです。ただし、ChromeとFirefoxだけ。

CSS対応ブラウザ（特にChrome）は自分でjQueryで動きをつくるよりかっこいいので、

・ChromeかFirefoxの場合はCSSで
・それ以外はjQueryで

スムーススクロールするように設定しました。

CSS

まずはCSS。これはすげえ簡単。というかこんなプロパティ知らなかった。。現状、ChromeとFirefoxしか対応してません。

html{
    scroll-behavior:smooth;
}

jQuery

ChromeとFirefoxの場合はCSSで設定したスムーススクロールを邪魔しないように、それ以外のUser Agentの場合のみ有効にします。

if (!(navigator.userAgent.match('Chrome/') || navigator.userAgent.match('Firefox/'))) {
    jQuery(function () {
        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;
            jQuery("html, body").animate({
                scrollTop: position
            }, speed, "swing");
            return false;
        });
    });
}

HTML

あわせるとこんなかんじ。

<style>
    html{
        scroll-behavior:smooth;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.slim.min.js"></script>
<script>
    if (!(navigator.userAgent.match('Chrome/') || navigator.userAgent.match('Firefox/'))) {
        jQuery(function () {
            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;
                jQuery("html, body").animate({
                    scrollTop: position
                }, speed, "swing");
                return false;
            });
        });
    }
</script>