[解決済み] アンカーリンクをクリックしたときのスクロールを滑らかにする

質問

私のページには、いくつかのハイパーリンクがあります。ヘルプセクションを訪れたユーザーが読むことになるFAQです。

アンカーリンクを使って、アンカーに向かってページをスクロールさせ、ユーザーをそこに誘導することができるんだ。

そのスクロールをスムーズにする方法はありますか？

しかし、彼はカスタムのJavaScriptライブラリを使っていることに注目してください。もしかしたら、jQueryはこのような機能を備えているのかもしれませんね。

解決方法は？

2018年4月の更新情報です。 現在では これを行うためのネイティブな方法 :

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

現在、最先端のブラウザでのみサポートされています。

古いブラウザに対応している場合は、このjQueryのテクニックを使用することができます。

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});

そして、これがバイオリンです。 http://jsfiddle.net/9SDLw/

ターゲット要素にIDがなく、そのIDを使用してリンクしている場合 name は、これを使用します。

$('a[href^="#"]').click(function () {
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    }, 500);

    return false;
});

パフォーマンスを向上させるためには、そのキャッシュを $('html, body') セレクタが実行されないようにするためです。 いちいち アンカーがクリックされたとき。

var $root = $('html, body');

$('a[href^="#"]').click(function () {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);

    return false;
});

URLを更新させたい場合は animate のコールバックです。

var $root = $('html, body');

$('a[href^="#"]').click(function() {
    var href = $.attr(this, 'href');

    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });

    return false;
});