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 untersucht.

Native Unterstützung

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

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

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

jQuery-Plugin

Bei älteren Browsern kann ein jQuery-Plugin 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, kann das folgende modifizierte jQuery-Plugin verwendet werden:

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

    return false;
});

Leistungsoptimierung

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 beibehalten

Um den URL-Hash beim reibungslosen Scrollen zu aktualisieren, verwenden Sie den „animate“-Callback:

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 Scrollerlebnis bieten.