Wie kann ich mit jQuery und nativem JavaScript reibungsloses Scrollen für Ankerlinks implementieren?

Reibungsloses Scrollen mit Ankerlinks

Wenn Ankerlinks verwendet werden, um Benutzer zu bestimmten Abschnitten einer Webseite zu leiten, kann ein reibungsloses Scrollen die Zugänglichkeit und das Engagement der Benutzer verbessern. jQuery bietet integrierte Funktionen, um diesen Effekt zu erzielen.

jQuery-Technik

Um einen reibungslosen Bildlauf mit jQuery zu initiieren, verwenden Sie den folgenden Code:

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

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

Native Approach (Modern Browser)

Moderne Browser unterstützen jetzt natives reibungsloses Scrollen für Ankerlinks. Implementieren Sie dieses Verhalten mit dem folgenden Code:

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

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

Zusätzliche Überlegungen

Kein ID-Attribut: Wenn das Zielelement kein ID-Attribut hat, aber durch den Namen identifiziert wird, verwenden Sie dieser Code:

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

    return false;
});

Leistungsoptimierung: Zwischenspeichern des Dokumentstammselektors zur Verbesserung Leistung:

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

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

    return false;
});

URL-Aktualisierung: Um die URL während des Scrollens zu aktualisieren, verwenden Sie diesen Rückruf:

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 mit jQuery und nativem JavaScript reibungsloses Scrollen für Ankerlinks implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!