it-swarm.com.de

Animieren Sie die ID beim Laden der Seite

Animieren Sie den Bildlauf beim Laden der Seite zu einer bestimmten ID. Ich habe viel recherchiert und bin darauf gestoßen:

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

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

Der HTML-Code (der in der Mitte der Seite liegt) ist einfach:

<h2 id="title1">Title here</h2>
117
Adi

Sie scrollen nur die Höhe Ihres Elements. offset () gibt die Koordinaten eines Elements relativ zum Dokument zurück, und top param 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);
313
BumbleB2na

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

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

P.S. Der Parameter 'smooth' funktioniert jetzt ab Chrome 61 wie in den Kommentaren erwähnt julien_c .

9
Vladimir Vovk
$(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: $('#title1').offset().top }, 1000);

jquery-animierte-körper-für-alle-browser .

4
AleX gRey

Dafü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 unterstützt auch Animationen, so dass der Bildlaufeffekt sehr glatt wirkt. Überprüfen Sie diesen Link .

In Ihrem Fall lautet der Code

$("#title1").animatedScroll({easing: "easeOutExpo"});
3
Eugene Tiurin

versuchen Sie es mit folgendem Code. Erstellen Sie Elemente mit Klassennamen Page-Scroll und behalten Sie den ID-Namen auf href der entsprechenden Links

$('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();
    });
1
Akhil

verwenden Sie für einfaches Scrollen den folgenden Stil

höhe: 200px; Überlauf: blättern;

und verwenden Sie diese Stilklasse, mit dem div oder der Bereich scrollen soll

0
m.m