web-dev-qa-db-fra.com

Animer Faites défiler jusqu'à ID lors du chargement de la page

Vous souhaitez animer le défilement vers un ID particulier lors du chargement de la page. J'ai fait beaucoup de recherches et suis tombé sur ceci:

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

mais cela semble partir de l'ID et s'animer en haut de la page?

Le code HTML (qui se trouve au milieu de la page) est simplement:

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

Vous faites seulement défiler la hauteur de votre élément. offset () renvoie les coordonnées d'un élément par rapport au document, et top param vous donnera la distance de l'élément en pixels le long de l'axe des ordonnées:

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

Et vous pouvez également ajouter un délai à cela:

$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000);
313
BumbleB2na
$(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: $('#title1').offset().top }, 1000);

jquery-animate-body-for-tous-les navigateurs .

4
AleX gRey

Il existe un plugin jquery pour cela. Il fait défiler le document vers un élément spécifique, de sorte qu'il soit parfaitement au milieu de la fenêtre Il prend également en charge les animations facilitant l’effet de défilement. Vérifiez ce lien .

Dans votre cas, le code est

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

essayez avec le code suivant. crée des éléments avec le nom de classe page-scroll et conserve le nom de l'identifiant à href des liens correspondants

$('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

pour un simple défilement, utilisez le style suivant

hauteur: 200px; débordement: scroll;

et utilisez cette classe de style quelle div ou section que vous voulez montrer défiler

0
m.m