jQuery tricks: one button -> multiple targets

Have you ever seen something like this?

A lot of websites that have vertically-distributed content usually need to redirect users to different relevant areas, based on their position.

This is pretty usual with websites with full-height divs: an example is the (pretty cool) html5up.net template “Landed”, that solves the problem in the most common way: using several buttons that point to the different sections (in section 1 there’s a button pointing to section 2, where there’s another button pointing to section 3, and so on).

In some cases, this is not so efficient in my humble opinion, for two reasons:

  1. It’s tedious for the developer: you need to use different ids for each target, and put a button for each section that points to the next target
  2. Poor UX: this button is supposed to be a reference for the user to go to the next relevant section. Instead, he/she finds a series of buttons that executes the same function, but one for each section. Moreover, they’re in different positions if he/she scrolled a little in the view. I find it slightly inconsinsten from a UX point of view.

My solution: jQuery magic!

I decided to build a fixed button that redirects the website’s visitor to the next relevant section, based on his current position.

You can find the code for my solution on GitHub, and test it on CodePen. Anyhow, I’ll explain how it works step by step here so that it may inspire someone to improve it and come up with other cool solutions.

  1. Add a 'target_element' class to the sections that are relevant for your users, and you want them to be redirected to by clicking on the magic button we’re about to create
<div class = 'target_element'>
<h1>This div is the first target</h1>
</div>
<div class = 'target_element'>
<h1>This div is the second target</h1>
</div>

2. Create a fixed button, with id = 'next_button' , and specify in its css position : absolute , if you want it to be fixed on the page.

3. Here comes the magic. We first want our javascript code to find the position of all the relevant sections that we tagged with the 'target_element' class. We’ll do it by executing the following code when the page is ready:

targets_positions = [];
i = 0;
$(".target_element").each(function (index) {
targets_positions[i] = $(this).offset().top;
i++;
})

What it does is pretty simple: it first creates an empty array, and then fills it with the position of the relevant sections, by looping through all the elements with class = 'target_element' and checking their .offset().top property.

We end up with an array like this one:

[8, 1008, 2008, 3008]

Where the numbers are the offsets of the relevant elements from the top.

Now the most important part: we need to define the behaviour of our magic button, which has first to understand in which section of the website the user is, and then send him to the next relevant one. We’ll do it, again, with some jQuery magic:

$("#next_button").click(function(){
for (i=1; i<=targets_positions.length; i++) {
if ($(window).scrollTop() < targets_positions[i]){
break;
}
}
$('html,body').animate({scrollTop:targets_positions[i]}, 1000);
})

What it does is simple: whenever we click on the element with id = 'next_button' , it loops through all the different positions of the relevant targets, that we stored precently in the targets_positions array.

As soon as it finds a target that is more down in the page than the user’s current position (the window’s .scrollTop() property is minor than the next element’s offest, stored in the targets_position array), it stops looping : we understood what position we have to redirect the user to. We can then redirect the user to this position smoothly with the beloved jQuery .animate() function.


That’s basically it! Hope this was clear and useful for someone.

If you have questions, or you want to add/modify something, please comment below or fork the project on GitHub.

As usual, click on the ❤ button if you found this useful :)