Desplazarse a un elemento con jQuery
Tengo este inputelemento:
<input type="text" class="textfield" value="" id="subject" name="subject">
Luego tengo algunos otros elementos, como otras etiquetas y <textarea>etiquetas, etc.
Cuando el usuario hace clic en <input id="#subject">, la página debe desplazarse hasta el último elemento de la página, y debe hacerlo con una animación agradable (debe ser un desplazamiento hacia abajo y no hacia arriba) .
El último elemento de la página es un submitbotón con #submit:
<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">
La animación no debe ser demasiado rápida y debe ser fluida.
Estoy ejecutando la última versión de jQuery. Prefiero no instalar ningún complemento sino utilizar las funciones predeterminadas de jQuery para lograrlo.
Suponiendo que tienes un botón con id button, prueba este ejemplo:
$("#button").click(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});
Obtuve el código del artículo Desplácese suavemente hasta un elemento sin un complemento jQuery . Y lo he probado en el siguiente ejemplo.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#click").click(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>
jQuery .scrollTo(): Ver - Demostración, API, Fuente
Escribí este complemento liviano para facilitar mucho el desplazamiento de páginas/elementos. Es flexible donde se puede pasar un elemento de destino o un valor específico. Quizás esto podría ser parte del próximo lanzamiento oficial de jQuery, ¿qué opinas?
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 : elemento, cadena o número que indica la posición de desplazamiento deseada.
offsetTop : un número que define el espacio adicional sobre el objetivo de desplazamiento.
duración : una cadena o número que determina cuánto tiempo se ejecutará la animación.
flexibilización : una cadena que indica qué función de flexibilización usar para la transición.
complete : una función para llamar una vez que se completa la animación.
Si no está muy interesado en el efecto de desplazamiento suave y solo está interesado en desplazarse a un elemento en particular, no necesita ninguna función jQuery para esto. Javascript tiene su caso cubierto:
https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView
Entonces todo lo que necesitas hacer es:$("selector").get(0).scrollIntoView();
.get(0)se usa porque queremos recuperar el elemento DOM de JavaScript y no el elemento DOM de JQuery.
ACTUALIZAR
ahora es posible desplazarse con animación, pasando las opciones de desplazamiento (ver MDN ). Incluso puedes controlar la posición del bloque. Parece tener un gran soporte, excepto Safari.
$("selector").get(0).scrollIntoView({behavior: 'smooth'});
