comment faire défiler automatiquement en bas d'une page html?

Je suis en train de commencer chaque page après la page d'accueil sur 500px 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 vers le bas et sans préavis, mais vous pouvez que faites défiler jusqu'à revel le curseur en vedette de nouveau.

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

Fondamentalement, je n'ai vedette une section 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. Toute aide?

  • vous pouvez jeter un oeil à ce. stackoverflow.com/questions/8773405/...
  • Sweet! Mon seul souci est que vous pouvez encore voir l'animation de la faire défiler. De sorte que chaque page je clique sur charger la première 500px et de défilement moi pour le contenu en dessous. Qui sera gênant pour l'utilisateur. Pensées?
InformationsquelleAutor Hambone | 2012-01-07
  1. 42

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

    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;
}
    • Cette solution fonctionne pour moi sous IE mais pas de Chrome. Des idées?
    • Plus d'info: il fonctionne dans Chrome sur le premier chargement de la page mais pas sur actualiser. Je pense que c'est à cause de ce bug: code.google.com/p/chromium/issues/detail?id=280460. Si j'en dur-pour actualiser la page, ça fonctionne, c'est à dire en cliquant sur dans la barre d'adresse et appuyer sur la touche enter. Mais douce réinitialise aime la page rafraîchissant ou en cliquant sur le bouton actualiser (ou en tapant sur la touche F5) ne fonctionnent pas.
    InformationsquelleAutor ThinkingStiff
  2. 3

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

    Le premier est avec javascript: définir la scrollTop propriété de l'élément déroulant (par exemple document.body.scrollTop = 1000;).

    Le deuxième paramètre est le lien pour qu'il pointe sur l'id de la page, par exemple

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

    Alors si dans votre page cible, vous n'aurez que l'ID de la page pour faire défiler automatiquement.

    • Pour votre première technique, comment voulez-vous obtenir si c'est vers le bas à la position d'un élément spécifique?
    • Oui j'ai ce sujet de faire des points d'ancrage, mais c'est le dernier recours. Je ne peux pas dire comment ces gars-là ne il unionstationdenver.com
    • dans la plaine de javascript, vous pouvez trouver la position d'un élément à l'intérieur d'un document comme ceci: var topPosition = document.getElementById("myElement").offsetTop;
    • vous pouvez le voir dans ce script, lien qu'ils sont à l'aide de la scrollTo méthode de l'objet window. Plus d'infos: scrollTo sur mozilla
    InformationsquelleAutor Luca
  3. 2

    voici l'exemple à l'aide de JavaScript

    JS:

    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>

    CSS:

    <style type="text/css">

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

</style>

    HTML:

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

    InformationsquelleAutor MohitGhodasara
  4. 1

    Utilisation document.scrollTop pour modifier la position du document. Définir la scrollTop de la document égale à la bottom de la section de votre site

    • scrollTop est applicable seulement à un élément du DOM, de ne pas le document
    • scrollTop ne travailler sur le document en tant que sa partie des DOM
    InformationsquelleAutor Sean H Jenkins