Animer faites défiler jusqu'à l'identifiant (ID) de chargement de la page

Im tring pour animer le faites défiler jusqu'à un ID particulier au 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 de les animer en haut de la page?

Le code HTML (qui est à mi-chemin en bas de la page) est tout simplement:

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

Ce n'est pas une réponse, mais je vous recommande fortement d'Ariel Flesler du "scrollTo" plugin; il a beaucoup de fonctionnalités pour l'affichage sur une page, et quelques extensions pour le plugin pour les cas courants (par exemple, vous pourriez trouver son "LocalScroll" plugin utile pour le défilement d'un lien href si c'est sur la même page). Vous pouvez obtenir le plugin ici: flesler.blogspot.com/2007/10/jqueryscrollto.html
L'OP est vieux, mais je vais partager ce post pour d'autres venant de SE. Voici un article qui part d'une fonction simple de résoudre le problème: smartik.ws/2015/01/...

InformationsquelleAutor Adi | 2011-07-13

318

Vous êtes seulement de défilement de la hauteur de votre élément. offset() renvoie les coordonnées d'un élément par rapport à un document, et top param va vous donner de l'élément de distance en pixels le long de l'axe des y:
```
$("html, body").animate({ scrollTop: $('#title1').offset().top }, 1000);
```
Et vous pouvez également ajouter un délai à elle:
```
$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000);
```
- Qu'est-ce défilement automatique qui me fait aller "WOW COOL!!"? C'est peut-être la simplicité de votre solution.
- J'avais besoin de faire défiler un élément dans la vue au chargement de la page, mais avait deux questions: a) à l'aide de html,le corps" a donné deux rappels (un pour chaque appariés élément). b) Cela dépend du navigateur qui du corps ou html œuvres. J'ai donc fait un résumé que vous pouvez adapter pour les utiliser dans votre projet pour s'assurer de défilement en vue de travaux sur le "tout" du navigateur et que vous obtenez seulement un rappel lors de la fin de l'animation. gist.github.com/netsi1964/4ddffe1ae14e05220d25
- Ce n'est pas vraiment correct. Vous devriez vraiment prendre en compte la position de défilement actuelle de corps ou élément que nous essayons de scroll. Avec cela à l'esprit, vous devez ajouter l'actuelle position de défilement de la body à la offset().top position de l'élément que nous voulons en vue, Le total obtenu est la valeur que nous voulons faire défiler jusqu'à.$('html, body').animate({ scrollTop: ($('html, body').scrollTop() + $('#title1').offset().top) }, 1000);
- avez-vous essayé ceci? Si la position de défilement est rien au-dessus de la valeur 0, alors ce que vous êtes suggérant peut ne pas fonctionner. Disons que déroulante contenant est de 1000 pixels de hauteur et la position de défilement actuelle est à 1000. Disons que l'élément que vous êtes défilement se trouve dans le centre vertical à 500. Je pense que ce que vous êtes suggérant dira il pour faire défiler jusqu'à 1500, droit?
- serait de vous donner un nombre négatif dans cette instance. Et cela ne fonctionne que pour les body et html depuis offset().top va vous donner le document en haut de décalage, pas l'intention de défilement parent.
- Je vous remercie, vous m'avez sauvé tellement de chagrin. J'ai eu un div qui n'est pas à 100% de la hauteur avec overflow-y: scroll ensemble. Cela fonctionne parfaitement tant que vous soustraire la distance entre le haut de la page et la div.
InformationsquelleAutor BumbleB2na
9

Pur javascript solution avec scrollIntoView() fonction:

JS:
```
document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});
```
HTML:
```
<h2 id="title1">Some title</h2>
```
P. S. "lisse" paramètre fonctionne maintenant à partir de Chrome 61 julien_c mentionné dans les commentaires.
- Fonctionne maintenant (à partir de Chrome 61)
- Assurez-vous de vérifier la compatibilité de navigateur.Comme de 10/2018 IE (11),Edge et Safari support "scrollIntoView" mais pas le "lisse" option.
- Pure JS ftw. Merci pour cet extrait! Lisse comme un double de beurre à la crème
InformationsquelleAutor Vladimir Vovk

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

jquery-animer des-corps-pour-tous-les navigateurs.

InformationsquelleAutor AleX gRey

3

Il y a un plugin jquery pour cela. Elle fait défiler le document pour un élément spécifique, de sorte qu'il serait parfaitement dans le milieu de la fenêtre d'affichage. Il prend également en charge l'animation de levées, de sorte que le défilement de l'effet aurait l'air super lisse. Vérifier ce lien.

Dans votre cas, le code est
```
$("#title1").animatedScroll({easing: "easeOutExpo"});
```
- "Il prend également en charge l'animation de levées, de sorte que le défilement de l'effet aurait l'air super lisse" Malheureusement, ce n'est pas vrai. Si l'ordinateur est lent pour une raison quelconque, il ne cesse de sauter sans se déplacer correctement.
- Défilement lisse nécessite beaucoup de pixels à calculer. Assurer une lente "ordinateur" (plus de GPU) ne peut pas faire cela, mais à cause du manque de suffisamment d'Umm. Donc, en général, il est bon. Et il est très facile de défilement lib.
InformationsquelleAutor Eugene Tiurin

essayer avec le code suivant. rendre les éléments avec un nom de classe page de défilement de la et de garder le nom de l'id de href de 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();
    });

InformationsquelleAutor Akhil

0

de Défilement simple, l'utilisation de style suivantes

height: 200px;
overflow: scroll;

et l'utilisation de cette classe de style qui div ou la section que vous voulez montrer de défilement

InformationsquelleAutor m.m

Vous devez vous connecter pour publier un commentaire.