He buscado y veo muchos ejemplos sobre este tema, pero no pude hacerlo de la mejor manera.
Solo estoy un poco familiarizado con JS y jQuery y quiero preguntar sobre el desplazamiento suave.
Tengo una navegación como esta. Esto se desplaza instantáneamente. Pero quiero hacerlo lentamente. ¿Cuál es la forma más corta y fácil para esto? Estoy más familiarizado con JS y no quiero descargar y usar los complementos de JS.
Esperando tu ayuda y todavía buscando
EDITAR !!!: En esta situación, necesito una sola clase. ¿Es posible dar esta propiedad para múltiples clases?
function scrollToElement (selector) { $('html, body').animate({ scrollTop: $(selector).offset().top }, 2000); }; $(document).on('click', 'a.uruna', function () { scrollToElement($(this).attr('href')); });
Tengo (‘click’, ‘a.uruna’, function (), ¿cómo puedo insertar otra clase aquí o debo escribir:
$(document).on('click', 'a.uruna', function () { scrollToElement($(this).attr('href')); }); $(document).on('click', 'a.new', function () { scrollToElement($(this).attr('href')); });
HTML:
- Plastik Panjur
[...]
JS:
function scrollToElement (selector) { $('html, body').animate({ scrollTop: $(selector).offset().top }, 2000); }; $(document).on('click', 'a.uruna', function () { scrollToElement($(this).attr('href')); });
o
function scrollToElement (obj) { $('html, body').animate({ scrollTop: obj.offset().top }, 2000); }; $(document).on('click', 'a.uruna', function () { scrollToElement($(this)); });
Noté que con la respuesta de JohnJohnGa obtienes un “parpadeo” (al menos para Google Chrome) donde la página aparece inmediatamente en la posición href del ancla y vuelve antes de que se desplace allí sin problemas. Puede que esto no se note con una computadora rápida, pero definitivamente se notó en la computadora en la que estaba trabajando. Para solucionar esto, hice lo siguiente:
$('a.page-scroll').bind('click', function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 1500, 'easeInOutExpo'); event.preventDefault(); window.history.pushState(null, null, $($anchor.attr('href')).selector); });
Tenga en cuenta que esto evita que el evento predeterminado se window.history.pushState y luego use window.history.pushState para imitarlo. Para los navegadores antiguos que no admiten pushState , se desplazará a la ubicación correcta, pero no actualizará la ubicación de la dirección.
Demostración en vivo: http://jsfiddle.net/wVEAy/2/
Tenga en cuenta que para este caso necesitaría tener un elemento con el mismo id que el especificado en la etiqueta href de su enlace:
function scrollToElement (selector) { $('html, body').animate({ scrollTop: $(selector).offset().top }, 2000); }; $(document).on('click', 'a.uruna', function () { scrollToElement($(this).attr('href')); });