JavaScript pour faire défiler une longue page vers DIV
J'ai un lien sur une longue page HTML. Lorsque je clique dessus, je souhaite qu'un div d'une autre partie de la page soit visible dans la fenêtre en défilant dans l'affichage.
Un peu comme EnsureVisible dans d'autres langues.
J'ai vérifié scrollTop et scrollTo, mais ils ressemblent à des harengs rouges.
Quelqu'un peut-il aider?
vieille question, mais si quelqu'un le trouve sur google (comme je l'ai fait) et qui ne veut pas utiliser d'ancres ou jquery; il y a une fonction javascript intégrée pour "sauter" à un élément;
document.getElementById('youridhere').scrollIntoView();
et ce qui est encore mieux Selon les excellentes tables de compatibilité sur Quirksmode, c'est supporté par tous les principaux navigateurs !
Si vous ne souhaitez pas ajouter une extension supplémentaire, le code suivant devrait fonctionner avec jQuery.
$('a[href=#target]').
click(function(){
var target = $('a[name=target]');
if (target.length)
{
var top = target.offset().top;
$('html,body').animate({scrollTop: top}, 1000);
return false;
}
});
Que diriez-vous du JQuery ScrollTo - voir cet exemple de code
<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>
<A name='myAnchorALongWayDownThePage"></a>
Pas de défilement sophistiqué mais cela devrait vous y conduire.
La difficulté avec le défilement est que vous pouvez non seulement avoir besoin de faire défiler la page pour afficher un div, mais vous pouvez également avoir besoin de faire défiler les div à défilement sur un nombre quelconque de niveaux.
La propriété scrollTop est disponible sur tout élément DOM, y compris le corps du document. En le paramétrant, vous pouvez contrôler jusqu'à quel point un élément défile. Vous pouvez également utiliser les propriétés clientHeight et scrollHeight pour voir combien de défilement est nécessaire (le défilement est possible lorsque clientHeight (viewport) est inférieur à scrollHeight (la hauteur du contenu).
Vous pouvez également utiliser la propriété offsetTop pour déterminer où se trouve un élément dans le conteneur.
Pour créer une routine véritablement polyvalente "faire défiler la vue", vous devez commencer par le nœud que vous souhaitez exposer, assurez-vous qu'il se trouve dans la partie visible de son parent, puis répétez la même chose pour le parent, etc. le chemin jusqu'au sommet.
Une étape de ceci ressemblerait à quelque chose comme ça (code non testé, pas vérification des cas Edge):
function scrollIntoView(node) {
var parent = node.parent;
var parentCHeight = parent.clientHeight;
var parentSHeight = parent.scrollHeight;
if (parentSHeight > parentCHeight) {
var nodeHeight = node.clientHeight;
var nodeOffset = node.offsetTop;
var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
parent.scrollTop = scrollOffset;
}
if (parent.parent) {
scrollIntoView(parent);
}
}
Cela a fonctionné pour moi
document.getElementById('divElem').scrollIntoView();
Vous pouvez utiliser la méthode Element.scrollIntoView() comme indiqué ci-dessus. Si vous le laissez sans paramètre à l'intérieur, vous aurez un défilement instantané laide. Pour éviter cela, vous pouvez ajouter ce paramètre - behavior:"smooth".
Exemple:
document.getElementById('scroll-here-plz').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
Il suffit de remplacer scroll-here-plz avec votre div ou un élément sur un site Web. Et si vous voyez votre élément au bas de votre fenêtre ou si la position n’est pas celle à laquelle vous vous attendiez, jouez avec le paramètre block: "". Vous pouvez utiliser block: "start", block: "end" ou block: "center".
Rappelez-vous: utilisez toujours des paramètres à l'intérieur d'un objet {}.
Si vous rencontrez toujours des problèmes, allez à https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
Il existe une documentation détaillée pour cette méthode.
Réponse publiée ici - même solution à votre problème.
Edit: la réponse de JQuery est très agréable si vous voulez un défilement régulier - je ne l’avais jamais vu auparavant.
Pourquoi pas une ancre nommée?
La propriété dont vous avez besoin est location.hash. Par exemple:
location.hash = 'top'; // sauterait à l'ancre nommée "top
Je ne sais pas comment faire l’animation Nice Scroll sans l’utilisation du dojo ou d’une boîte à outils de ce type, mais si vous en avez juste besoin pour passer à une ancre, location.hash devrait le faire.
(testé sur FF3 et Safari 3.1.2)
Je ne peux pas ajouter de commentaire à la réponse de futtta ci-dessus, mais pour un défilement plus fluide, utilisez:
onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"
Pour un défilement régulier, ce code est utile
$('a[href*=#scrollToDivId]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
var head_height = $('.header').outerHeight(); // if page has any sticky header get the header height else use 0 here
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - head_height
}, 1000);
return false;
}
}
});
J'ai personnellement trouvé la réponse ci-dessus basée sur jQuery de Josh comme étant la meilleure que j'ai vue, et fonctionnait parfaitement pour mon application ... bien sûr, j'étais déjà en utilisant jQuery ... Je n'aurais certainement pas inclus toute la bibliothèque jQ rien que pour ça.
À votre santé!
EDIT: OK ... quelques secondes seulement après avoir posté ceci, j’ai vu une autre réponse juste ci-dessous la mienne (je ne sais pas si elle est toujours en dessous de moi après une modification) qui disait d’utiliser:
document.getElementById ('your_element_ID_here'). scrollIntoView ();
Cela fonctionne parfaitement et dans bien moins de code que la version jQuery! Je n'avais aucune idée qu'il y avait une fonction intégrée dans JS appelée .scrollIntoView (), mais c'est comme ça! Donc, si vous voulez une animation sophistiquée, utilisez jQuery. Quick n 'dirty ... utilisez celui-ci!
Il existe un plugin jQuery pour le cas général du défilement d'un élément DOM, mais si les performances posent problème (et quand n'est-ce pas?), Je suggérerais de le faire manuellement. Cela implique deux étapes:
- Recherche de la position de l'élément que vous faites défiler.
- Faire défiler jusqu'à cette position.
quirksmode donne une bonne explication du mécanisme derrière le premier. Voici ma solution préférée:
function absoluteOffset(elem) {
return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}
Il utilise le casting de null à 0, ce qui ne correspond pas à l'étiquette dans certains cercles, mais j'aime bien :) La deuxième partie utilise window.scroll. Donc le reste de la solution est:
function scrollToElement(elem) {
window.scroll(absoluteOffset(elem));
}
Voila!
scrollTop (IIRC) est l'endroit où défiler le haut de la page dans le document. scrollTo fait défiler la page jusqu'à ce que vous spécifiez le haut de la page.
Ce dont vous avez besoin ici, ce sont des styles Javascript manipulés. Dites si vous voulez la div hors écran et faites défiler l'écran à partir de la droite, définissez l'attribut gauche de la div sur la largeur de la page, puis diminuez-le d'un montant défini toutes les quelques secondes jusqu'à ce qu'il se trouve à l'endroit souhaité.
Cela devrait vous orienter dans la bonne direction.
Supplémentaire: je suis désolé, je pensais que vous souhaitiez qu'une division distincte "sorte" quelque part (un peu comme ce site est parfois utilisé) et que la page entière ne soit pas déplacée dans une section. L'utilisation appropriée des ancres permettrait d'atteindre cet effet.