Animer le défilement jusqu'à l'ID lors du chargement de la page

123

Im tring pour 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 commencer à partir de l'ID et s'animer en haut de la page?

Le HTML (qui est à mi-chemin de la page) est simplement:

<h2 id="title1">Title here</h2>
jquery scroll jquery-animate Adi
la source
1
Ce n'est pas vraiment une réponse, mais je recommande vivement le plugin "scrollTo" d'Ariel Flesler; il a beaucoup de fonctionnalités pour faire un panoramique sur une page, et quelques extensions au plugin pour les cas courants (par exemple, vous pourriez trouver son plugin "LocalScroll" utile pour faire défiler jusqu'à href d'un lien s'il est sur la même page). Vous pouvez obtenir le plugin ici: flesler.blogspot.com/2007/10/jqueryscrollto.html
Faisal

Réponses:

327

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

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

Et vous pouvez également y ajouter un délai:

$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000);
BumbleB2na
la source
1
Qu'est-ce que le défilement automatique me fait dire "WOW COOL !!" C'est peut-être la simplicité de votre solution.
theblang
J'avais besoin de faire défiler un élément en vue lors du chargement de la page, mais j'avais deux problèmes: a) l'utilisation de "html, body" donnait deux rappels (un pour chaque élément correspondant). b) Cela dépend du navigateur, lequel du corps ou du html fonctionne. J'ai donc fait un point essentiel que vous pouvez adapter à utiliser dans votre projet pour vous assurer que le défilement dans la vue fonctionne sur "n'importe quel" navigateur et que vous n'obtiendrez qu'un seul rappel à la fin de l'animation. gist.github.com/netsi1964/4ddffe1ae14e05220d25
Netsi1964
2
Ce n'est pas vraiment correct. Vous devriez vraiment considérer la position de défilement actuelle du corps ou de l'élément que nous essayons scroll. Dans cet esprit, vous ajouteriez la position de défilement actuelle du bodyà la offset().topposition de l'élément que nous voulons afficher, la somme résultante est la valeur vers laquelle nous voulons faire défiler. $('html, body').animate({ scrollTop: ($('html, body').scrollTop() + $('#title1').offset().top) }, 1000);
mattdevio
@magreenberg avez-vous essayé cela? Si la position de défilement actuelle est supérieure à la valeur 0, ce que vous suggérez peut ne pas fonctionner. Supposons que le conteneur à défilement mesure 1 000 pixels de haut et que la position de défilement actuelle est à 1 000. Supposons que l'élément sur lequel vous faites défiler se trouve au centre vertical à 500. Je pense que ce que vous suggérez lui indiquerait de défiler jusqu'à 1 500 , droite?
BumbleB2na
@ BumbleB2na .offset().topvous donnerait un nombre négatif dans ce cas. Et cela ne fonctionne vraiment que pour bodyet htmlpuisque offset().topva vous donner le décalage du haut du document, pas le parent de défilement prévu.
mattdevio
12

Solution javascript pure avec la fonction scrollIntoView () :

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

Le paramètre PS 'smooth' fonctionne désormais à partir de Chrome 61 comme julien_c mentionné dans les commentaires.

Vladimir Vovk
la source
1
Fonctionne maintenant (à partir de Chrome 61)
julien_c
Assurez-vous de vérifier la compatibilité du navigateur. Depuis 10/2018 IE (11), Edge et Safari prennent en charge "scrollIntoView" mais pas l'option "smooth".
metal_jacke1
Pure JS ftw. Merci pour cet extrait! Onctueux comme une double crème au beurre
jean d'arme
3

Il existe un plugin jquery pour cela. Il fait défiler le document jusqu'à un élément spécifique, de sorte qu'il soit parfaitement au milieu de la fenêtre. Il prend également en charge les accélérations d'animation afin que l'effet de défilement soit super lisse. Vérifiez ce lien .

Dans votre cas, le code est

$("#title1").animatedScroll({easing: "easeOutExpo"});
Eugène Tiurin
la source
"Il prend également en charge les accélérations d'animation pour que l'effet de défilement soit super lisse" Malheureusement, cela n'est pas vrai. Si l'ordinateur est lent pour une raison quelconque, il continue de sauter sans bouger correctement.
brunoais
Le défilement fluide nécessite beaucoup de pixels pour être calculé. Bien sûr, un "ordinateur" lent (plus de GPU) ne peut pas faire cela mais en raison d'un manque d'ALU. Donc, généralement, il a raison. Et la bibliothèque de défilement vraiment facile.
Roland
1

essayez avec le code suivant. créer des éléments avec le nom de la classe, faire défiler la page et conserver l'identifiant hrefdes 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();
    });
Akhil
la source
-3

pour un simple défilement, utilisez le style suivant

hauteur: 200px; débordement: faire défiler;

et utilisez cette classe de style quelle div ou section vous voulez afficher scroll

mm
la source