div - scroll down jquery

jQuery.scrollTop();+animación

Question

Configuro la página para desplazarme hacia arriba cuando se hace clic en un botón. Pero primero usé una declaración if para ver si la parte superior de la página no estaba configurada en 0. Entonces, si no es 0, animo la página para desplazarme 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 animar algo DESPUÉS de que la página se haya desplazado hacia la parte superior. Entonces mi siguiente pensamiento es, averiguar cuál es la posición de la página. Así que utilicé el 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 posición en el que estaba justo antes de desplazarse hacia la parte superior.

Mi pregunta es ¿cómo configuro la posición para que sea 0, para poder agregar otra animación que se ejecute una vez que la página esté en 0?

¡Gracias!

Answer 1

Solución simple:

desplazarse a cualquier elemento por 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;
    });
}

Answer 2

Código con la función de hacer clic ()

    var body = $(''html, body'');

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

}); 

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

Answer 3

Para hacer esto, puede establecer una función de devolución de llamada para el comando animado que se ejecutará después de que la animación de desplazamiento haya finalizado.

Por ejemplo:

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

Donde ese código de alerta es, puede ejecutar más javascript para agregar más animaciones.

Además, el ''swing'' está ahí para establecer la relajación. Visite http://api.jquery.com/animate/ para obtener más información.

Answer 4

Prueba este código:

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

Answer 5

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

Answer 6

Utilizar esta:

$(''a[href^="#"]'').on(''click'', function(event) {

    var target = $( $(this).attr(''href'') );

    if( target.length ) {
        event.preventDefault();
        $(''html, body'').animate({
            scrollTop: target.offset().top
        }, 500);
    }

});

Answer 7

para esto puedes usar el método de devolución de llamada

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

Answer 8

debes de ver esto

$(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 pruébalos

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

Answer 9

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