web-dev-qa-db-fra.com

comment faire défiler automatiquement une page html?

J'essaie de commencer chaque page après la page d'accueil à environ 500 pixels vers le bas, comme sur ce site Web: http://unionstationdenver.com/

Vous remarquerez que lorsque vous visualisez des pages après la page d'accueil, vous faites automatiquement défiler l'écran vers le bas, mais vous pouvez faire défiler l'écran pour afficher à nouveau le curseur en vedette.

J'ai joué avec scrolledHeight mais je ne pense pas que c'est ce dont j'ai besoin ????

En gros, j'ai une section en vedette qui est au-dessus de toutes mes pages de contenu, mais vous ne devriez pas pouvoir la voir avant de faire défiler l'écran vers le haut. De l'aide?

javascripthtmlcssscrollheight
28
Hambone

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

Exemple:

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

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

Scénario:

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;
}
42
ThinkingStiff

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

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

La seconde consiste à définir le lien pour qu'il pointe vers un identifiant spécifique dans la page, par exemple.

<a href="mypage.html#sectionOne">section one</a>

Ensuite, si vous avez cet identifiant dans votre page cible, la page défilera automatiquement.

3
Luca

voici l'exemple utilisant Pure JavaScript

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

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

</style>
<div id="top">top</div>
<div id="bottom">bottom</div>
2
MohitGhodasara

Utilisation document.scrollTop pour changer la position du document. Définissez le scrollTop du document égal au bottom de la section en vedette de votre site.

1
Sean H Jenkins