comment faire défiler automatiquement une page html?

Question

Je suis en train de commencer chaque page après la page d'accueil à propos 500px vers le bas, similaire à ce site: http://unionstationdenver.com/

Vous remarquerez lors de l'affichage des pages après la page d'accueil, vous êtes automatiquement défiler sans préavis mais vous pouvez que faites défiler vers le haut pour retrouver le curseur sélectionné.

J'ai joué avec scrolledHeight mais je ne pense pas que c'est ce dont j'ai besoin ???? Fondamentalement, j'ai une section en vedette qui est au-dessus de toutes mes pages de contenu, mais vous ne devriez pas être en mesure de voir cette section jusqu'à ce que vous faites défiler vers le haut. De l'aide?

Answer 1

Utilisez document.scrollTop pour changer la position du document. Définir le scrollTop du document correspondant au bottom de la section vedette de votre site

Answer 2

Vous pouvez utiliser deux techniques différentes pour y parvenir.

La première est avec javascript: définissez la propriété scrollTop de l'élément défilant (par exemple, document.body.scrollTop = 1000;).

La seconde consiste à définir le lien pour pointer vers un identifiant spécifique dans la page, par ex. Ensuite, si dans votre page cible vous avez cet ID, la page sera automatiquement défilée.

Answer 3

Vous pouvez utiliser .scrollIntoView() pour cela. Cela amènera un élément spécifique dans la fenêtre.

Exemple:

document.getElementById('bottom').scrollIntoView(); 

Démo: http://jsfiddle.net/ThinkingStiff/DG8yR/

Script:

function top() { 
    document.getElementById('top').scrollIntoView();  
}; 

function bottom() { 
    document.getElementById('bottom').scrollIntoView(); 
    window.setTimeout(function() { top(); }, 2000); 
}; 

bottom(); 

HTML:

<div id="top">top</div> 
<div id="bottom">bottom</div> 

CSS:

#top { 
    border: 1px solid black; 
    height: 3000px; 
} 

#bottom { 
    border: 1px solid red; 
} 

Answer 4

function scrollpage() { \t \t 
 
\t function f() 
 
\t { 
 
\t \t window.scrollTo(0,i); 
 
\t \t if(status==0) { 
 
    \t \t \t i=i+40; 
 
\t \t \t if(i>=Height){ \t status=1; } 
 
\t \t } else { 
 
\t \t \t i=i-40; 
 
\t \t \t if(i<=1){ \t status=0; } // if you don't want continue scroll then remove this line 
 
\t \t } 
 
\t setTimeout(f, 0.01); 
 
\t }f(); 
 
} 
 
var Height=document.documentElement.scrollHeight; 
 
var i=1,j=Height,status=0; 
 
scrollpage(); 
 
</script>

<style type="text/css"> 
 

 
\t #top { border: 1px solid black; height: 20000px; } 
 
\t #bottom { border: 1px solid red; } 
 

 
</style>

<div id="top">top</div> 
 
<div id="bottom">bottom</div>