Sanfter Bildlauf beim Anklicken eines Ankerlinks

Question

Ich habe einige Hyperlinks auf meiner Seite. Eine FAQ, die die Benutzer lesen, wenn sie meinen Hilfebereich besuchen.

Mit Hilfe von Anker-Links kann ich die Seite zu dem Anker scrollen lassen und die Benutzer dorthin führen.

Gibt es eine Möglichkeit, den Bildlauf reibungslos zu gestalten?

Aber beachten Sie, dass er eine benutzerdefinierte JavaScript-Bibliothek verwendet. Vielleicht bietet jQuery etwas wie dies in eingebettet?

Answer 1

Sie brauchen keine Js, sondern verwenden einfach scroll-behavior: smooth at html tag Das ist es

html{
scroll-behavior: smooth;
}

Answer 2

$('a[href*=#]').click(function(event){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    event.preventDefault();
});

das hat bei mir perfekt funktioniert

Answer 3

Ich schlage Ihnen vor, diesen allgemeinen Code zu erstellen:

$('a[href^="#"]').click(function(){

var the_id = $(this).attr("href");

    $('html, body').animate({
        scrollTop:$(the_id).offset().top
    }, 'slow');

return false;});

Einen sehr guten Artikel können Sie hier lesen: jquery-effet-smooth-scroll-defilement-fluide

Answer 4

Es gibt hier bereits viele gute Antworten - aber sie alle lassen die Tatsache außer Acht, dass leere Anker müssen ausgeschlossen werden . Andernfalls erzeugen diese Skripte JavaScript-Fehler, sobald ein leerer Anker angeklickt wird.

Meiner Meinung nach lautet die richtige Antwort wie folgt:

$('a[href*=\\#]:not([href$=\\#])').click(function() {
    event.preventDefault();

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

Answer 5

Es gibt eine systemeigene Unterstützung für den reibungslosen Bildlauf bei Hash-Id-Bildläufen.

html {
  scroll-behavior: smooth;
}

Sie können es sich ansehen: https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2