Wie kann ich mit Ankerlinks ein reibungsloses Scrollen erreichen?

Reibungsloses Scrollen beim Klicken auf einen Ankerlink

Beim Navigieren auf einer Webseite mit Ankerlinks erwarten Benutzer einen nahtlosen Übergang zum Zielabschnitt. Das standardmäßige Scrollverhalten kann jedoch abrupt sein. In diesem Artikel werden Techniken zum Erzielen eines reibungslosen Scrollens beim Klicken auf Ankerlinks erläutert.

Native Unterstützung

Browser wie Chrome und Firefox haben native Unterstützung für reibungsloses Scrollen eingeführt. Dies wird über die Eigenschaft „behavior“ mit dem Wert „smooth“ beim Scrollen in die Ansicht umgesetzt:

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

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

jQuery-Plugin

Für ältere Browser ein jQuery-Plugin kann die Scroll-Animation glätten. Diese Technik verwendet die „Animate“-Methode, um die Seite in den Zielabschnitt zu verschieben:

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

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

Erweiterte Technik

Wenn dem Zielelement eine ID fehlt, gilt Folgendes Es kann ein modifiziertes jQuery-Plugin verwendet werden:

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

    return false;
});

Leistung Optimierung

Das Zwischenspeichern des Selektors „$('html, body')“ innerhalb einer Variablen verbessert die Leistung:

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

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

    return false;
});

URL-Hash erhalten bleiben

Um den URL-Hash beim reibungslosen Scrollen zu aktualisieren, verwenden Sie die Funktion „animieren“. 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;
});

Durch die Implementierung einer dieser Techniken können Sie beim Navigieren auf Ihrer Seite mithilfe von Ankerlinks ein ausgefeiltes und benutzerfreundliches Scroll-Erlebnis bieten.

Das obige ist der detaillierte Inhalt vonWie kann ich mit Ankerlinks ein reibungsloses Scrollen erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!