1090 votos

jQuery desplácese Hasta el Elemento

Tengo este elemento de entrada:

<input type="text" class="textfield" value="" id="subject" name="subject">

Entonces tengo algunos otros elementos, como los otros texto de las entradas, textareas, etc.

Cuando el usuario hace clic en esa entrada #subject, la página debe desplazarse al último elemento de la página con una bonita animación. Debe ser una desplácese hacia abajo y no hacia arriba.

El último elemento de la página hay un botón enviar:

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

La animación no debe ser demasiado rápido, y debe ser fluido.

Estoy ejecutando la última versión de jQuery. Yo prefiero no instalar ningún plugin, pero para utilizar el valor predeterminado de jQuery características para lograr esto.

2228voto

Steve Puntos 16704

Suponiendo que se tiene un botón con el id 'botón', pruebe este ejemplo:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

Tengo el código en el artículo sin problemas de desplazamiento a un elemento sin un plugin de jQuery. Y lo he probado en el ejemplo de abajo.

<html>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                //$(this).animate(function(){
                    $('html, body').animate({
                        scrollTop: $("#div1").offset().top
                    }, 2000);
                //});
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>

359voto

Timothy Perez Puntos 6379

jQuery .scrollTo() Method

jQuery .scrollTo(): Ver - Demo, API, Fuente

Escribí este ligero plugin para hacer página/elemento de desplazamiento mucho más fácil. Es flexible, donde se podría pasar en un elemento objetivo o valor especificado. Tal vez esto podría ser parte de jQuery de la siguiente versión oficial, ¿qué te parece?


Ejemplos De Uso:

$('body').scrollTo('#target'); // Scroll screen to target element

$('body').scrollTo(500); // Scroll screen 500 pixels down

$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down

Opciones:

scrollTarget: Un elemento de la cadena, o el número que indica la deseada posición de desplazamiento.

offsetTop: Un número que define el espacio adicional por encima de desplazamiento de destino.

duración: una cadena o Un número que determinará el tiempo de la animación se ejecuta.

flexibilización: Una cadena que indica que la flexibilización de la función a utilizar para la transición.

completa: Una función a llamar una vez que se complete la animación.

129voto

Atharva Puntos 624

Si usted no está muy interesado en el desplazamiento suave efecto y sólo interesado en el desplazamiento a un elemento en particular, que no requieren de algunos de jQuery función de esta. Javascript tiene su caso cubiertas:

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

Así que todo lo que necesita hacer es: $("selector").get(0).scrollIntoView();

.get(0) se utiliza porque queremos recuperar el JavaScript DOM elemento y no el de JQuery, elemento DOM.

32voto

add9 Puntos 876

Retirar la Desplázate plugin. Usted puede ver la demo aquí.

Espero te sirva de ayuda.

13voto

Warface Puntos 1577

El uso de este sencillo script

if($(window.location.hash).length > 0){
        $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}

Iba a hacer en clase que si una etiqueta de hash se encuentra en la dirección url, el desplázate animar a la ID. Si no etiqueta de hash se encuentra, entonces ignorar la secuencia de comandos.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X