Animieren Sie beim Laden der Seite einen Bildlauf zur ID

123

Versuchen Sie, den Bildlauf beim Laden der Seite auf eine bestimmte ID zu animieren. Ich habe viel recherchiert und bin auf Folgendes gestoßen:

$("html, body").animate({ scrollTop: $('#title1').height() }, 1000);

aber dies scheint von der ID zu beginnen und zum Anfang der Seite zu animieren?

Der HTML-Code (der sich auf der Hälfte der Seite befindet) lautet einfach:

<h2 id="title1">Title here</h2>
jquery scroll jquery-animate Adi
quelle
1
Dies ist keine gute Antwort, aber ich kann das "scrollTo" -Plugin von Ariel Flesler nur empfehlen. Es verfügt über viele Funktionen zum Schwenken einer Seite und einige Erweiterungen des Plugins für häufige Fälle (z. B. kann das Plugin "LocalScroll" nützlich sein, um zum href eines Links zu scrollen, wenn es sich auf derselben Seite befindet). Sie können das Plugin hier bekommen: flesler.blogspot.com/2007/10/jqueryscrollto.html
Faisal

Antworten:

327

Sie scrollen nur die Höhe Ihres Elements. offset () gibt die Koordinaten eines Elements relativ zum Dokument zurück, und topparam gibt den Abstand des Elements in Pixel entlang der y-Achse an:

$("html, body").animate({ scrollTop: $('#title1').offset().top }, 1000);

Und Sie können auch eine Verzögerung hinzufügen:

$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000);
BumbleB2na
quelle
1
Was bringt mich zum automatischen Scrollen zu "WOW COOL !!"? Vielleicht liegt es an der Einfachheit Ihrer Lösung.
Theblang
Ich musste ein Element beim Laden der Seite in die Ansicht scrollen, hatte aber zwei Probleme: a) Die Verwendung von "html, body" ergab zwei Rückrufe (einen für jedes übereinstimmende Element). b) Es hängt vom Browser ab, welcher Text oder HTML funktioniert. Deshalb habe ich eine Übersicht erstellt, die Sie an die Verwendung in Ihrem Projekt anpassen können, um sicherzustellen, dass das Scrollen in die Ansicht in "jedem" Browser funktioniert und Sie nur einen Rückruf erhalten, wenn die Animation endet. gist.github.com/netsi1964/4ddffe1ae14e05220d25
Netsi1964
2
Das ist nicht wirklich richtig. Sie sollten wirklich die aktuelle Bildlaufposition des Körpers oder Elements berücksichtigen, die wir versuchen scroll. In diesem Sinne würden Sie die aktuelle Bildlaufposition von bodyzu der offset().topPosition des Elements hinzufügen, das in der Ansicht angezeigt werden soll. Die resultierende Summe ist der Wert, zu dem wir einen Bildlauf durchführen möchten. $('html, body').animate({ scrollTop: ($('html, body').scrollTop() + $('#title1').offset().top) }, 1000);
Mattdevio
@magreenberg hast du das ausprobiert? Wenn die aktuelle Bildlaufposition über dem Wert 0 liegt, funktioniert das, was Sie vorschlagen, möglicherweise nicht. Angenommen, der scrollbare Container ist 1000 Pixel hoch und die aktuelle Bildlaufposition liegt bei 1000. Angenommen, das Element, zu dem Sie scrollen, befindet sich bei 500 in der vertikalen Mitte , richtig?
BumbleB2na
@ BumbleB2na .offset().topwürde Ihnen in diesem Fall eine negative Zahl geben. Und dies funktioniert wirklich nur für bodyund htmlda offset().topSie den oberen Versatz des Dokuments erhalten, nicht den beabsichtigten übergeordneten Bildlauf.
Mattdevio
12

Reine Javascript-Lösung mit der Funktion scrollIntoView () :

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});
<h2 id="title1">Some title</h2>
Erweitern Sie das Snippet

Der PS-Parameter "glatt" funktioniert jetzt ab Chrome 61, wie in den Kommentaren erwähnt, julien_c .

Vladimir Vovk
quelle
1
Funktioniert jetzt (ab Chrome 61)
julien_c
Überprüfen Sie unbedingt die Browserkompatibilität. Ab 10/2018 IE (11) unterstützen Edge und Safari "scrollIntoView", jedoch nicht die Option "Smooth".
metal_jacke1
Pure JS ftw. Danke für diesen Ausschnitt! Glatt wie doppelte Buttercreme
Jean d'arme
3

Hierfür gibt es ein JQuery-Plugin. Das Dokument wird zu einem bestimmten Element gescrollt, sodass es sich perfekt in der Mitte des Ansichtsfensters befindet. Es werden auch Animationserleichterungen unterstützt, sodass der Bildlaufeffekt sehr flüssig aussieht. Überprüfen Sie diesen Link .

In Ihrem Fall ist der Code

$("#title1").animatedScroll({easing: "easeOutExpo"});
Eugene Tiurin
quelle
"Es werden auch Animationserleichterungen unterstützt, sodass der Bildlaufeffekt sehr flüssig aussieht." Leider trifft dies nicht zu. Wenn der Computer aus irgendeinem Grund langsam ist, springt er einfach weiter, ohne sich tatsächlich richtig zu bewegen.
Brunoais
Für ein reibungsloses Scrollen müssen viele Pixel berechnet werden. Sicher, ein langsamer "Computer" (mehr GPU) kann dies nicht, aber weil nicht genügend ALUs vorhanden sind. Im Allgemeinen hat er also Recht. Und wirklich einfach scrollen lib.
Roland
1

Versuchen Sie es mit folgendem Code. Erstellen Sie Elemente mit dem Klassennamen " Bildlauf" und behalten Sie den ID-Namen hrefder entsprechenden Links bei

$('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });
Akhil
quelle
-3

Verwenden Sie für einen einfachen Bildlauf den folgenden Stil

Höhe: 200px; Überlauf: scrollen;

und verwenden Sie diese Stilklasse, um welches Div oder welchen Abschnitt Sie scrollen möchten

mm
quelle