Wie kann ich reibungsloses Scrollen für Ankerlinks implementieren?

Reibungsloses Scrollen mit Ankerlinks erreichen

Die Einbindung von Hyperlinks zu FAQs in einen Hilfebereich ist ein gängiger Ansatz, um Benutzer zu bestimmten Informationen zu führen. Während Ankerlinks das Scrollen der Seite zum Zielort ermöglichen, kann ein reibungsloses Scrollen die Benutzerinteraktion verbessern.

Native und jQuery-basierte Lösungen

Die neuesten Versionen von Browsern Unterstützen Sie jetzt eine native Lösung für reibungsloses Anker-Scrollen.

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

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

Für eine breitere Browserkompatibilität bietet jQuery eine Alternative Technik:

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

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

Außerdem behandelt jQuery Fälle, in denen das Zielelement keine ID hat.

 $('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') kann erheblich verbessert werden Leistung.

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

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

    return false;
});

URL aktualisieren

Wenn eine Aktualisierung der URL beim Scrollen gewünscht wird, kann dies innerhalb des Animationsrückrufs erreicht werden.

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 implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!