Efecto scroll bajar hasta el bottom

[mardojai]

Hola amigos, y gracias de antemano.

Lo que estoy intentando conseguir es que, mediante Jquery. Cuando el usuario haga un scroll mayor de 100px o que simplemente haga scroll, madiante una animacion baje esta el bottom de la pagina.

No se si me explico bien?

Espero que puedan ayudarme.

[Alexis88]

Claro que se puede, pero ten en cuenta que sería una experiencia incómoda para el usuario. Imagina que se haya desplazado unos 120 píxeles para leer o ver algo y, de repente, el scroll se desplaza hasta el fondo; tendría que desplazarse hacia arriba para poder ver lo que quería.

Creo que deberías replantear lo que quieres hacer antes de continuar o quizá si nos explicas el fin de esto, se pueda ver una mejor solución.

Saludos

[mardojai]

Iniciado por Alexis88

Claro que se puede, pero ten en cuenta que sería una experiencia incómoda para el usuario. Imagina que se haya desplazado unos 120 píxeles para leer o ver algo y, de repente, el scroll se desplaza hasta el fondo; tendría que desplazarse hacia arriba para poder ver lo que quería.

Creo que deberías replantear lo que quieres hacer antes de continuar o quizá si nos explicas el fin de esto, se pueda ver una mejor solución.

Saludos

La cosa es que estoy construyendo una web que tienes dos secciones con 100vh de alto, osea cada sección tiene el 100% del alto de la pantalla del usuario, lo que estoy buscando realmente, es que cuando el usuario baje el scroll, se le deslice a la sección 2, y que estando en la sección 2, al subir se le deslice a la sección 1.

Espero que se entienda xD, creo que debí explicar esto al principio.

Saludos.

[Alexis88]

Aún me sigue pareciendo que puede llegar a ser incómodo para el usuario, porque puede ser que solo haya bajado con el scroll por querer ver solamente el inicio de la segunda sección o quizá por un error involuntario (movió mucho el mouse mientras bajaba o este es muy sensible).

Se me ocurre que sería más cómodo si tuvieras un menú cuyas opciones serían las que desplazaran al scroll hacia la sección que la opción indique.

Código HTML:

<nav>
    <li>Sección 1</li>
    <li>Sección 2</li>
    <li>Sección 3</li>
</nav>
    
<div>
    Contenido de la sección 1
</div>
    
<div>
    Contenido de la sección 2
</div>
    
<div>
    Contenido de la sección 3
</div>
 

Código Javascript:

var dad, pos, div, posDiv;
 
$("li").on("click", function(){
    dad = $(this).parent(); //El menú de opciones
    pos = $.inArray(this, dad.children()); //El número de opción pulsada
    div = $("div").eq(pos); //El número de Div correspondiente
    posDiv = div.position().top; //La ubicación del Div correspondiente
 
    //Desplazo suavemente al scroll hasta la ubicación del Div
    $("html, body").animate({
        scrollTop: posDiv
    }, 500);
});
 

DEMO

Saludos

[mardojai]

Gracias por tu respuesta,

Yo ya tengo implementada una funcionalidad similar a esa. La cuestión es que la web no tiene contenido que el usuario quiera leer, es un sitio en donde es importante la velocidad con la que el usuario pasa de una sección a otra, y creo que seria de gran ayuda que lo pueda hacer con el mismo scroll, sin tener que clickear nada.

Saludos.