cómo desplazarse automáticamente hacia abajo en una página html?

estoy tratando de empezar cada página después de la página de inicio sobre 500px abajo, similar a este sitio web: http://unionstationdenver.com/cómo desplazarse automáticamente hacia abajo en una página html?

Se dará cuenta al visualizar páginas después de la página principal, que está desplazado automáticamente sin previo aviso pero puede hacerlo de desplácese hacia arriba para deleitar nuevamente el control deslizante presentado.

He jugado con la altura de desplazamiento pero no creo que sea eso lo que necesito ???

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

Fuente

2012-01-07 Hambone

es posible que desee ver en esto. http://stackoverflow.com/questions/8773405/how-to-auto-scroll-to-target-div-with-jquery/8773563#8773563 – pixelass

¡Dulce! Mi única preocupación es que todavía vea la animación del pergamino. De modo que cada página en la que haga clic cargará los primeros 500 px y luego me desplazará al contenido que se encuentra debajo. Eso molestará al usuario. ¿Pensamientos? – Hambone

Utilice document.scrollTop para cambiar la posición del documento. Establezca el scrollTop del document igual que el bottom de la sección presentada de su sitio

Fuente

2012-01-07 23:21:20

scrollTop se aplica solo a un elemento DOM, no al documento – Luca

'scrollTop' funciona en el documento como parte del DOM –

Puede 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 un ID específico en la página, p.

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

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

Fuente

2012-01-07 23:28:02 Luca

Para su primera técnica, ¿cómo se obtiene así que se reduce a la posición de un elemento específico ? – Wex

Sí, tengo eso sobre hacer anclas, pero ese es el último recurso. Simplemente no puedo decir cómo lo hicieron estos chicos http: // unionstationdenver.com/ – Hambone

@Wex en JavaScript simple puede encontrar la posición de un elemento dentro de un documento como este: 'var topPosition = document.getElementById (" myElement "). offsetTop;' – Luca

Puede usar .scrollIntoView() para esto. Traerá un elemento específico a 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; 
}

Fuente

2012-01-08 19:54:16 ThinkingStiff

Esta solución funciona para mí en IE pero no en Chrome. ¿Algunas ideas? – jfritz42

Más información: funciona en Chrome en la primera carga de la página, pero no en la actualización. Creo que se debe a este error: https://code.google.com/p/chromium/issues/detail?id=280460. Si actualizo fuertemente la página, funciona, es decir, haciendo clic en la barra de la URL y presionando enter. Pero los reinicios suaves como la actualización de la página o al hacer clic en el botón Actualizar (o presionar F5) no funcionan. – jfritz42

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>

Fuente

2014-11-10 15:06:31 MohitGhodasara

cómo desplazarse automáticamente hacia abajo en una página html?

Respuesta

Cuestiones relacionadas