défilement progressif vers un ID en JS

défilement progressif vers un ID en JS - HTML/CSS - Programmation

Marsh Posté le 26-12-2006 à 17:32:33    

Bonsoir,
je cherche à faire un défilement vertical progressif vers un id quelque part dans la page).
 
Je m'explique:
bien souvent on voit un bouton "remonter" avec un simple <a href="#top">, seulement je trouve cette méthode un peu brutale pour l'internaute, surtout si on l'emmene au milieu d'une page.  :bounce:  
 
alors comment faire pour détecter la distance entre un id et le haut de la page en javascript ?  
J'ai bien essayé de faire un  

Code :
  1. return document.getElementById(id).pageYOffset


mais ça me retourne undefined.
 
Il me suffirait en effet de connaitre cette distance et avec un srollBy et un coefficient entre 0 et 1 pour une décélération je fais défiler la page jusqu'à l'id voulu.
 
Connaissez-vous un script qui permet ça ?
Connaissez-vous une équivalence à  

Code :
  1. return document.getElementById(id).pageYOffset


 
 :)

Reply

Marsh Posté le 26-12-2006 à 17:32:33   

Reply

Marsh Posté le 27-12-2006 à 06:31:25    

document.body.scrollTop = 0 ??

Reply

Marsh Posté le 27-12-2006 à 09:07:10    

Pour faire remonter la page tout en haut oui, mais si j'ai un id au milieu de ma page et que je pars du haut ?

Reply

Marsh Posté le 27-12-2006 à 10:24:54    

On a un exemple ici
pour le défilement progressif. (cliquer sur remonter)


Message édité par papanoramix le 27-12-2006 à 11:00:25
Reply

Marsh Posté le 27-12-2006 à 10:43:15    

En gros ma question est: comment retrouver la distance entre deux objets ? (grace à leurs ID si possible)

Reply

Marsh Posté le 12-02-2007 à 11:07:08    

Tiens, c'est cadeau :
 
// Get the top pos of object
function GetTopPos(oElmt)
{  
 var returnValue = oElmt.offsetTop;
 while((oElmt = oElmt.offsetParent) != null)
 {
  if (oElmt.tagName != 'HTML') returnValue += oElmt.offsetTop;
 }
 return returnValue;
};
 
// Get the left pos of object
function GetLeftPos(oElmt)
{
 var returnValue = oElmt.offsetLeft;
 while((oElmt = oElmt.offsetParent) != null)
 {
  if (oElmt.tagName != 'HTML') returnValue += oElmt.offsetLeft;
 }
 return returnValue;
};
 
 
Tu appelles ces fonctions, avec en paramètre l'element sur lequel tu cherches la position.
Vérifie également le résultat de document.getElementById(), ça se trouve, ton élément n'est pas trouvé
J'utilise des fonctions similaires sur http://www.codes-de-reduction.fr pour trouver la position du champ de recherche en haut à droite et positionner une div juste en dessous.
 
Sinon je te conseille d'utiliser prototype, c'est un kit de dev en javascript qui te facilitera la vie.
 
Bon courage
 


Message édité par smougel le 12-02-2007 à 11:08:58
Reply

Marsh Posté le 12-02-2007 à 14:16:37    

ok, merci pour ces bons conseilles !

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed