JavaScript pour faire défiler une longue page vers un DIV

Question

J'ai un lien sur une longue page HTML. Lorsque je clique dessus, je souhaite qu'un DIV sur une autre partie de la page soit visible dans la fenêtre en défilant à l'écran.

Un peu comme EnsureVisible dans d'autres langues.

J'ai vérifié scrollTop et scrollTo mais ils semblent être des faux-fuyants.

Quelqu'un peut-il m'aider ?

Answer 1

Réponse postée aquí - même solution à votre problème.

Edit : la réponse de JQuery est très bien si vous voulez un défilement lisse - je n'avais pas vu cela en action avant.

Answer 2

Pourquoi pas une ancre nommée ?

Answer 3

La propriété dont vous avez besoin est location.hash. Par exemple :

location.hash = 'top' ; //sautera vers l'ancre nommée "top

Je ne sais pas comment faire une belle animation de défilement sans utiliser dojo ou une boîte à outils de ce genre, mais si vous avez juste besoin de sauter à une ancre, location.hash devrait le faire.

(testé sur FF3 et Safari 3.1.2)

Answer 4

Il existe un plugin jQuery pour le cas général du défilement vers un élément du DOM, mais si les performances sont un problème (et quand ne le sont-elles pas ?), je suggère de le faire manuellement. Cela implique deux étapes :

1. Recherche de la position de l'élément sur lequel vous faites défiler les pages.
2. Défilement jusqu'à cette position.

quirksmode donne une bonne explication du mécanisme de la première. Voici la solution que je préfère :

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

Il utilise le casting de null à 0, ce qui n'est pas l'étiquette appropriée dans certains milieux, mais j'aime ça :) La deuxième partie utilise window.scroll . Donc le reste de la solution est :

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

Voilà !

Answer 5

ScrollTop (IIRC) est l'endroit du document où le haut de la page doit défiler. scrollTo fait défiler la page de sorte que le haut de la page se trouve à l'endroit que vous avez spécifié.

Ce dont vous avez besoin ici, ce sont des styles manipulés par Javascript. Par exemple, si vous voulez que la division soit hors écran et qu'elle défile depuis la droite, vous devez définir l'attribut gauche de la division sur la largeur de la page, puis le diminuer d'une quantité définie toutes les quelques secondes jusqu'à ce qu'il soit là où vous le souhaitez.

Cela devrait vous mettre sur la bonne voie.

Supplémentaire : je suis désolé, je pensais que vous vouliez qu'un div séparé sorte de quelque part (un peu comme ce site le fait parfois), et non pas déplacer la page entière vers une section. Une bonne utilisation des ancres permet d'obtenir cet effet.