javascript - div - ¿Cómo se desplaza automáticamente hacia abajo una página html?

title label html

Question

Estoy tratando de comenzar cada página después de la página de inicio aproximadamente 500px abajo, similar a este sitio web: http://unionstationdenver.com/

Notará que cuando ve páginas después de la página de inicio, se desplaza automáticamente hacia abajo sin previo aviso, pero puede desplazarse hacia arriba para mostrar nuevamente el control deslizante destacado.

He jugado con scrolledHeight pero no creo que eso sea lo que necesito ????

Básicamente, tengo una sección destacada que está encima de todas mis páginas de contenido, pero no debería poder ver esta sección hasta que se desplace hacia arriba. ¿Alguna ayuda?

Answer 1

Puedes usar dos técnicas diferentes para lograr esto.

El primero es con javascript: establece la propiedad scrollTop del elemento desplazable (por ejemplo, document.body.scrollTop = 1000; ).

El segundo es configurar el enlace para que apunte a una ID específica en la página, por ejemplo,

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

Luego, si en su página de destino tendrá esa ID, la página se desplazará automáticamente.

Answer 2

Use document.scrollTop para cambiar la posición del documento. Establezca el scrollTop de scrollTop del document igual al bottom de la sección destacada de su sitio

Answer 3

Puedes usar .scrollIntoView() para esto. Traerá un elemento específico en la ventana gráfica.

Ejemplo:

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

Demostración: http://jsfiddle.net/ThinkingStiff/DG8yR/

Guión:

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() {  
 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>