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

Vieille question, mais si quelqu'un trouve ceci à travers Google (comme je l'ai fait) et qui ne veut pas utiliser les 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, c'est que selon les tableaux de compatibilité de quirksmode, il s'agit de supporté par tous les principaux navigateurs !

Answer 2

Si vous ne voulez 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;
        }
    });

Answer 3

Que pensez-vous de la JQuery ScrollTo - voir cet exemple de code

Answer 4

<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

<A name='myAnchorALongWayDownThePage"></a>

Pas de défilement fantaisiste mais cela devrait vous y conduire.

Answer 5

La difficulté avec le défilement est que vous pouvez non seulement avoir besoin de faire défiler la page pour afficher une div, mais aussi de faire défiler les div défilables sur un nombre quelconque de niveaux.

La propriété scrollTop est disponible pour tout élément du DOM, y compris le corps du document. En la définissant, vous pouvez contrôler la profondeur de défilement d'un élément. Vous pouvez également utiliser les propriétés clientHeight et scrollHeight pour déterminer la quantité de défilement nécessaire (le défilement est possible lorsque clientHeight (fenêtre d'affichage) est inférieur à scrollHeight (la hauteur du contenu).

Vous pouvez également utiliser la propriété offsetTop pour savoir où se trouve un élément dans le conteneur.

Pour construire une routine de "défilement en vue" vraiment générale à partir de rien, il faudrait commencer par le nœud que vous voulez exposer, s'assurer qu'il est dans la partie visible de son parent, puis répéter la même chose pour le parent, etc, jusqu'à ce que vous atteigniez le sommet.

Une étape de ce processus ressemblerait à ceci (code non testé, ne vérifiant pas les cas limites) :

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);
  }
}