☰

アンカーリンクをクリックしたときにスムーズにスクロールする 質問する

tag-icon • tag-icon javascript jquery scroll hyperlink anchor
アンカーリンクをクリックしたときにスムーズにスクロールする 質問する

私のページにはハイパーリンクがいくつかあります。ユーザーがヘルプ セクションにアクセスしたときに読む FAQ です。

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

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

ただし、カスタム JavaScript ライブラリを使用していることに注意してください。jQuery には、このような機能が組み込まれている可能性があります。

ベストアンサー1

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 がなく、その でリンクしている場合は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;
});

おすすめ記事