4

According to the jQuery documentation .animate has a parameter called 'Complete' that should only fire once the animation has finished. Unfortunately I'm finding that it fires before the animation has even started.

if ($('html').scrollTop()) {
    $('html').animate({ scrollTop: 0 }, callback);
    return;
}

JSFiddle showing the problem: http://jsfiddle.net/JohnnyWalkerDesign/5zu90ygz/

What am I missing?

0

2 Answers 2

11

The callback parameter should be a function pointer. It's not a term used very often these days, but it means that you pass the function itself, not the result of a function.

What does this mean?

Given the example:

function message(q) {
    alert(q);
}

Here, message is a function. To pass that function as a callback, use the name of the function, eg:

setTimeout(message, 100);
$("#id").click(message);

Note that there's no () after the name of the function.

In javascript terms, the function itself is a variable and you pass the variable, but as soon as you add () you are calling the function and passing the result, not the function itself.

If you use message() then the function will be executed and the result of the function passed as the callback, ie:

setTimeout(message("x"), 100);

is the equivalent of:

var x = message("x");
setTimeout(x, 100);

So you can see from this code why message runs immediately (more obvious with click event or longer timeout).

The format setTimeout(message, 100); isn't used very often as a) it looks like a typo (should that be message()?) and b) it doesn't allow you to pass a parameter, so this would frequently be written as:

setTimeout(function() { message("x") }, 100);

which uses an anonymous in-line function as the callback variable / function pointer.


Back the question:

In your original fiddle, all you needed to do was change the callback to a true callback without the need to add a separate parameter, ie:

$('#scroll').on('click', function(e) {
    e.preventDefault;
    scrollToTop(function() { message("Reached Top")});
});

Updated fiddle: http://jsfiddle.net/5zu90ygz/9/

1
  • 1
    Thank you. I knew there were some issues with the other solution. There were things that were changed for no reason, and mentions of issues that weren't issues at all. I'm amazed it got so many upvotes to be honest (although it ended up in a reasonably good state in the end). Your explanation is perfect and very helpful. Commented Oct 13, 2015 at 15:41
6

You're calling the function message when registering it as callback in the statement scrollToTop(message('Reached Top'));. Here the function message will be called and the returned value will be passed to the scrollToTop function.

Updated Fiddle

You can pass an extra parameter to the function scrollToTop i.e. message to be displayed and then this message can be forwarded to the message function after animation completes.

// Scroll to the top and fire callback
function scrollToTop(callback, message) {
  // Send the message as the second parameter

  if ($('html').scrollTop()) {
    $('html').animate({
      scrollTop: 0
    }, function() {
      // Call the callback function with the message as param after completion of animate
      callback(message)
    });
    return;
  }

  if ($('body').scrollTop()) {
    $('body').animate({
      scrollTop: 0
    }, function() {
      // Call the callback function with the message as param after completion of animate
      callback(message)
    });
    return;
  }

  callback(message);
}

// Dummy callback function to fire
function message(q) {
  alert(q);
}

// On click event
$('#scroll').on('click', function(e) {
  e.preventDefault;
  
  // Add message as second parameter
  scrollToTop(message, "Reached Top! Yay!");
});
div {
  width: 100%;
  border: 1px solid black;
  height: 200px;
  margin: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<a href="#" id="scroll">Scroll to top</a>

4
  • You're no longer passing the parameter to the callback function. That's no help to me :( Also, message() is NOT called by scrollToTop() -- did you skim-read the code? That's a fallback incase the browser is already at the top of the screen. Commented Oct 13, 2015 at 11:00
  • You can use bind if you want to give the message as an argument of scrollToTop. Commented Oct 13, 2015 at 11:11
  • @QuentinRoy Yes, you can, but that'll replace the original context in case If OP still want to access it inside the function
    – Tushar
    Commented Oct 13, 2015 at 11:14
  • @Tushar I downvoted you because your code has unnecessary elements that you apparently didn't understand from my original code. You still think that message() was being called by scrollToTop() so you removed it... but you kept the if statements in(!). Very odd. The rest of your changes are good and helpful. Correct your code and I'll happily accept and upvote. Thanks for your help, my code works fine now: jsfiddle.net/JohnnyWalkerDesign/5zu90ygz/8 Commented Oct 13, 2015 at 11:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.