Wie kann ich reibungsloses Scrollen für Ankerlinks mithilfe von JavaScript und jQuery implementieren?

Erstellen eines reibungslosen Scrollens für Ankerlinks

Das reibungslose Scrollen verbessert die Benutzererfahrung, wenn Ankerlinks zum Navigieren innerhalb einer Seite verwendet werden. Dieser Artikel bietet zwei Ansätze, um diesen Effekt zu erzielen: eine native Methode, die mit modernen Browsern kompatibel ist, und eine jQuery-Implementierung für eine breitere Unterstützung.

Native Methode für moderne Browser:

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

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

jQuery-Methode für ältere Browser:

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

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

Hinweis:Für Elemente ohne ID sollte diese Variante verwendet werden:

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

    return false;
});

Leistungsoptimierung:

Um die Leistung zu verbessern, speichern Sie den $('html, body') zwischen. Selektor:

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

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

    return false;
});

URL aktualisieren:

Für Fälle, in denen die URL den aktuellen Abschnitt widerspiegeln soll, verwenden Sie diese Variante:

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;
});

Das obige ist der detaillierte Inhalt vonWie kann ich reibungsloses Scrollen für Ankerlinks mithilfe von JavaScript und jQuery implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!