Puedo configurar la página para desplazarse a la parte superior cuando se hace clic en un botón. Pero primero he utilizado una instrucción if para ver si la parte superior de la página no se ajusta a 0. Entonces, si no es 0 I animar la página para desplazarse a la parte superior.

var body = $("body");
var top = body.scrollTop() //Get position of the body

if(top!=0)
{
  body.animate({scrollTop:0}, '500');
}

La parte difícil ahora es la animación de algo DESPUÉS de que la página se ha desplazado a la parte superior. Así que mi siguiente pensamiento es, averiguar cuál es la página de posición. Por lo que he usado de registro de la consola para averiguarlo.

console.log(top);  //the result was 365

Esto me dio un resultado de 365, supongo que es el número de la posición que yo estaba justo antes de desplazarse a la parte superior.

Mi pregunta es ¿cómo puedo ajustar la posición a ser 0, por lo que puedo añadir otra animación que se ejecuta una vez que la página está en 0?

Gracias!

  • es necesario que aquellos botón en el que el fuego de evento siempre visible? Si no, entonces tengo un código que no necesitan ningún tipo de condición que se puede hacer más fácil para su primera condición
  • No debería ser comillas alrededor de los milisegundos. La «cadena» de la documentación se refiere a la lenta/rápida

9 Comentarios

  1. 297

    Para hacer esto, usted puede establecer una función de devolución de llamada para animar el comando que se ejecutará después de que el desplazamiento de la animación ha terminado.

    Por ejemplo:

    var body = $("html, body");
    body.stop().animate({scrollTop:0}, 500, 'swing', function() { 
       alert("Finished animating");
    });

    Donde que alerta de código se puede ejecutar más de javascript para añadir más animación.

    También, el ‘swing’ está ahí para establecer la relajación. Echa un vistazo http://api.jquery.com/animate/ para obtener más información.

    • Gracias Thomas, que es lo que yo necesitaba. También he añadido un retraso, puesto que la clase se añaden de forma rápida. si(top!=0) { console.log(«oculto» de desplazamiento); cuerpo.animate({scrollTop:0}, ‘500’, ‘swing’, function() { console.log(«Terminado de animar»); leftitems.delay(1000).removeClass(«presentación»); }); }
    • Yo tenía que hablar de animar duración sin las comillas, cuando sólo tenía 2 parámetros para la función animate. Que era muy extraño.
    • No estoy seguro de si es porque este post es de 4 años, pero creo que en las nuevas versiones de jQuery que usted necesita para eliminar esas comillas simples alrededor de la fecha de distribución: el cuerpo.animate({scrollTop:0}, 500, ‘swing’, function() { alert(«Terminado de animar»); });
    • Su devolución de llamada de ejecutar dos veces, por el camino, porque se ha seleccionado dos elementos.
    • Thomas tuvo buen punto añadir cuerpo y html. Caso 1. Chrome lectura cuerpo y srolling, necesidad de FIrefox html para hacerlo.
    • Sólo traté de – $(‘html’) no funciona en Chrome y $(‘body’) no funciona en Firefox, por lo que $(‘html, body») es necesario. Y también llamando .stop() es una buena cosa – traté de llamar a animar varias veces rápidamente en chrome y después de que yo no podía desplazarse hacia abajo en la página.
    • Usted mismo mi día

  2. 45

    Prueba este código:

    $('.Classname').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
    • $("html") debe ser utilizado en lugar de ello, porque en su caso si se agrega una función de devolución de llamada será llamado dos veces, una vez para html y de una vez por cuerpo. Y el uso de cuerpo no hace nada.
    • parece que depende del navegador. en algunos, $(‘html’) puede no hacer nada, por lo que necesita usar ambos, y cuidar de la devolución de llamada activa dos veces.
  3. 29

    Usar este:

    $('a[href^="#"]').on('click', function(event) {
    
        var target = $( $(this).attr('href') );
    
        if( target.length ) {
            event.preventDefault();
            $('html, body').animate({
                scrollTop: target.offset().top
            }, 500);
        }
    
    });
  4. 7

    Intente esto en su lugar:

    var body = $("body, html");
    var top = body.scrollTop() //Get position of the body
    if(top!=0)
    {
           body.animate({scrollTop :0}, 500,function(){
             //DO SOMETHING AFTER SCROLL ANIMATION COMPLETED
              alert('Hello');
          });
    }
  5. 6

    para esto puede utilizar el método de devolución de llamada

    body.animate({
          scrollTop:0
        }, 500, 
        function(){} //callback method use this space how you like
    );
  6. 4

    Solución Simple:

    de desplazamiento a cualquier elemento con un ID o NOMBRE:

    SmoothScrollTo("#elementId", 1000);

    código:

    function SmoothScrollTo(id_or_Name, timelength){
        var timelength = timelength || 1000;
        $('html, body').animate({
            scrollTop: $(id_or_Name).offset().top-70
        }, timelength, function(){
            window.location.hash = id_or_Name;
        });
    }
    • timelength‘ ya es pasado como parámetro, así que no hay necesidad de declarar con ‘var’. Un ‘editar’ de esta respuesta no era posible, como lo fue menos de 6 caracteres! 😉 +1
    • de ninguna manera afaik. var es necesario para no sobrescribir el mundial (si existen variable global con el mismo nombre)
    • Justo lo suficiente 😉 yo estoy usando el Texto y que pasa en un número directamente como parámetro de timelength por lo que todos los de ámbito local en mi caso. Saludos!
  7. 3

    Código con la función click()

        var body = $('html, body');
    
        $('.toTop').click(function(e){
            e.preventDefault();
            body.animate({scrollTop:0}, 500, 'swing');
    
    }); 

    .toTop = clase de clic elemento tal vez img o a

  8. 3
    jQuery("html,body").animate({scrollTop: jQuery("#your-elemm-id-where you want to scroll").offset().top-<some-number>}, 500, 'swing', function() { 
           alert("Finished animating");
        });
  9. -1

    usted debe ver este

    $(function () {
            $('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;
                    }
                }
            });
        });

    o intentarlo

    $(function () {$('a').click(function () {
    $('body,html').animate({
        scrollTop: 0
    }, 600);
    return false;});});

Dejar respuesta

Please enter your comment!
Please enter your name here