Implementing a trigger callback with jQuery

Scroll Top Animation with jQuery

To begin, let's explore a basic example. In this example, I will perform a basic animation that will scroll the user down to the content they are looking for:

function scrollTo(target) {
var $target = $("#" + target);
if ($target) {
$('html,body').animate( { scrollTop: $target.offset().top }, 700 );
}
}

In the above example, the scrollTo function accepts an id of an element in the DOM. This is assigned to a local variable. If the element exists, the browser will scroll down to its top offset over a period of 700 milliseconds.

The above example can easily be updated to add a third parameter for the on complete of the animation:

function scrollTo(target) {
var $target = $("#" + target);
if ($target) {
$('html,body').animate( { scrollTop: $target.offset().top }, 700, function() {
// do something on complete
} );
}
}

jQuery Trigger Function

That in itself can be quite useful; however, in this article I want to specifically explore jQuery's trigger function. The trigger function is a great way to execute built-in events, such as click, scroll, etc… but it can also be used to execute custom events. In the following example, I'm going to amend the previous example to bind a custom event to a function and then trigger that event in the completion of the animation.

function scrollTo(target) {
$(window).on('animationComplete', 'animationComplete('\'' + target + '\')');
var $target = $("#" + target);
if ($target) {
$('html,body').animate( { scrollTop: $target.offset().top }, 700, function() {
$(window).trigger('animationComplete');
} );
}
}
function animationComplete(target) {
$(window).off('animationComplete');
// do something on complete
}

In the above example, the first line of the scrollTo function creates the event listener called animationComplete. When this is triggered, the function animationComplete is called. Then inside of the on complete for the animation, this event is triggered. Finally, inside of the animationComplete function, the event is cleared.

If the event is not cleared, and the on function is called multiple times, the effect will stack. The reason why the on function is set inside of the scrollTo function each time is to pass the original target. This is a great example of how to pass data as well through the callback. Of course if you do not need to pass data, the event could be defined globally outside of the function just once and then it would not need to be cleared each time.

With the use of jQuery, custom events can be created and executed through the trigger function. An excellent way to perform a series of processes in the correct order, when by default they are done synchronously.

Published on Mar 14, 2019

Tags: JavaScript | jQuery Tutorial