javascript - scrolling - smooth scroll jquery

jQuery cross-browser "scroll to top", con animación

Question

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?

Answer 1

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; 
    });
});

Answer 2

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;
      }
    }
  }); 

Answer 3

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)
})
})

Answer 4

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ó.

Answer 5

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

Answer 6

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:

1. Oculta el div que contiene el enlace (para evitar el parpadeo).
2. Fije la posición del div en el borde inferior derecho de la ventana.
3. Elimine el atributo href y agregue un controlador de click para un desplazamiento suave. (Mantiene ordenadas las URL y el historial del navegador y no necesito return o preventDefault la preventDefault en la función de desplazamiento)
4. Fade div in / out dependiendo de la posición de desplazamiento:
   Mostrar enlace solo si la posición de desplazamiento> altura de la ventana.
5. 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);

Answer 7

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!

Answer 8

$(window).animate({ scrollTop: 0 }, ''slow'');

Funciona navegador cruzado