jQuery .scrollTop(); + animation

问题:

I set the page to scroll to top when a button is clicked. But first I used an if statement to see if the top of the page was not set to 0. Then if it's not 0 I animate the page to scroll to the top.

var body = $("body"); var top = body.scrollTop() // Get position of the body  if(top!=0) {   body.animate({scrollTop:0}, '500'); } 

The tricky part now is animating something AFTER the page has scrolled to the top. So my next thought is, find out what the page position is. So I used console log to find out.

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

This gave me a result of 365, I'm guessing that is the position number I was at just before scrolling to the top.

My question is how do I set the position to be 0, so that I can add another animation that runs once the page is at 0?

Thanks!

回答1:

To do this, you can set a callback function for the animate command which will execute after the scroll animation has finished.

For example:

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

Where that alert code is, you can execute more javascript to add in further animation.

Also, the 'swing' is there to set the easing. Check out http://api.jquery.com/animate/ for more info.

回答2:

Try this code:

回答3:

Use this:

$('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:

Try this instead:

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:

for this you can use callback method

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

回答6:

Code with click function()

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

.toTop = class of clicked element maybe img or a

回答7:

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

回答8:

Simple solution:

scrolling to any element by ID or NAME:

SmoothScrollTo("elementId", 1000); 

code:

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

回答9:

you must see this

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

or try them

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

文章来源: jQuery .scrollTop(); + animation