javascript - scrolling - smooth scroll jquery
jQuery cross-browser "scroll to top", con animación (8)
Ahora mismo estoy usando esto:
$(''#go-to-top'').each(function(){
$(this).click(function(){
$(''html'').animate({ scrollTop: 0 }, ''slow''); return true;
});
});
que no funciona en Chrome, y en Opera tengo un pequeño parpadeo: el navegador se desplaza instantáneamente hacia la parte superior, luego regresa a la parte inferior y luego comienza a desplazarse lentamente hacia la parte superior, como es debido.
¿Hay una mejor manera de hacer esto?
Está volviendo true desde la función de clic, por lo que no impedirá el comportamiento predeterminado del navegador (es decir, navegar hasta el ancla de go-to-top directo. Como ha dicho Mark, use:
$(''html,body'').animate({ scrollTop: 0 }, ''slow'');
Entonces tu código debería verse como:
$(''#go-to-top'').each(function(){
$(this).click(function(){
$(''html,body'').animate({ scrollTop: 0 }, ''slow'');
return false;
});
});
Esto estará funcionando en todos los navegadores. Evita la etiqueta hash en la url, así que, ¡el desplazamiento suave está listo!
$(''#back-top a[href*=#]:not([href=#])'').click(function() {
if (location.pathname.replace(/^///,'''') == this.pathname.replace(/^///,'''') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $(''[name='' + this.hash.slice(1) +'']'');
if (target.length) {
$(''html,body'').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
Estoy usando esto, esto también es simple.
$(document).ready(function(e) {
var a = 400,
t = 1200,
l = 700,
s = e(".scrool-top");
e(window).scroll(function() {
e(this).scrollTop() > a ? s.addClass("scrool-is-visible") : s.removeClass("scrool-is-visible scrool-fade-out"), e(this).scrollTop() > t && s.addClass("scrool-fade-out")
}), s.on("click", function(a) {
a.preventDefault(), e("body,html").animate({
scrollTop: 0
}, l)
})
})
Hm ... extraño, con jsFiddle puedo hacer que funcione bien en Opera (versión 11.01), pero en Chrome solo salta a la parte superior y no lo anima como quieres.
Puede ver el jsFiddle aquí si quiere: http://jsfiddle.net/H7RFU/
Espero que eso ayude un poco, aunque no sea realmente una respuesta.
Si lo que he hecho no es el aspecto de su html, etc., actualícelo y agréguelo.
Atentamente,
cristiano
Advertencia: no he usado la función de guardar de jsFiddle antes, así que no sé por cuánto tiempo se guardó.
Para que funcionara en la ópera, esta answer resultó útil.
Poniendo eso con tu click()
$(this).click(function() {
$(window.opera ? ''html'' : ''html, body'').animate({
scrollTop: 0
}, ''slow'');
});
Ejemplo de código en jsfiddle .
Nota .each() si todo lo que está haciendo con el .each() está asignando un controlador de clic que no necesita iterar sobre la colección, se puede simplificar a esto:
$(''#go-to-top'').click(function(){
$(window.opera ? ''html'' : ''html, body'').animate({
scrollTop: 0
}, ''slow'');
});
Además, si hay más de un elemento con id #go-to-top su marca no será válida, intente cambiarlo a una clase .go-to-top
Tengo una solución fluida de dos maneras: desplazamiento suave y un botón suave.
Con JavaScript desactivado, es solo un enlace en la parte inferior de la página a la top ancla.
( # como href puede ser bastante inestable.)
Con JavaScript habilitado:
- Oculta el div que contiene el enlace (para evitar el parpadeo).
- Fije la posición del div en el borde inferior derecho de la ventana.
- Elimine el atributo
hrefy agregue un controlador declickpara un desplazamiento suave. (Mantiene ordenadas las URL y el historial del navegador y no necesitoreturnopreventDefaultlapreventDefaulten la función de desplazamiento) - Fade div in / out dependiendo de la posición de desplazamiento:
Mostrar enlace solo si la posición de desplazamiento> altura de la ventana. - Actualizar la posición en el cambio de tamaño.
HTML
<body>
<a name="top"></a>
...
<div id="scrolltotop" style="display:block;text-align:right">
<a href="#top" title="scroll to top"><img src="scrolltotop.png" alt="scroll to top"></a>
</div>
</body>
jQuery
function scrolltotop_display()
{
var el=$(''#scrolltotop'');
if((window.pageYOffset||document.documentElement.scrollTop)>window.innerHeight)
{ if(!el.is('':visible'')) { el.stop(true, true).fadeIn(); } }
else { if(!el.is('':animated'')) { el.stop(true, true).fadeOut(); }}
}
function scrolltotop_position()
{
var el=$(''#scrolltotop'');
el.css(''top'', window.innerHeight-100);
el.css(''left'', window.innerWidth-100);
scrolltotop_display();
}
$(window).on(''load'', function(){
$(''#scrolltotop'').css(''display'', ''none'');
$(''#scrollToTop'').css(''position'', ''fixed'');
scrolltotop_position();
$(''#scrollToTop a'').removeAttr(''href'');
$(''#scrollToTop a'').on(''click'', function(){$(''html, body'').animate({scrollTop:0}, 500);});
});
$(window).on(''scroll'', scrolltotop_display);
$(window).on(''resize'', scrolltotop_position);
tal vez algo como
$(''body'').animate({scrollTop:0}, ''slow'');
así como el html.
editar>
$(''#go-to-top'').each(function(){
$(this).click(function(){
$(''html'').animate({ scrollTop: 0 }, ''slow''); return true;
$(''body'').animate({ scrollTop: 0 }, ''slow''); return true;
$(''document'').animate({ scrollTop: 0 }, ''slow''); return true;
$(''window'').animate({ scrollTop: 0 }, ''slow''); return true;
});
});
debe cubrir todos los navegadores!
$(window).animate({ scrollTop: 0 }, ''slow'');
Funciona navegador cruzado