Create buttons to scroll horizontally

In today's tutorial, we will show you how, thanks to Webflow and a little code, we can add horizontal scrolling buttons to our project.

Step 1: Auto overflow

For this tutorial to work, it is necessary that one of the elements of your page has an auto overflow to have a basic horizontal scroll.

Step 2: Create 2 buttons (or link block)

In your section, you will have to insert two buttons (or link block). The first one will allow you to scroll to the left and the second to the right.

You can customize them as you wish.

We recommend adding a custom aria-label attribute to describe the buttons for web accessibility purposes.

Step 3: Add IDs to buttons

For your left button (which scrolls to the left), you can add the following ID: slideLeft

For your right button (which allows you to scroll to the right), you can add the following ID: slideRight

Step 4: Add an ID to your horizontally scrollable element

It is necessary to add an ID to the element that has an auto overflow. You can give it any ID you want.

Step 5: Insert code into your page

You will now go to the parameters of your page. In the "Before body Tag" part, you just have to copy and paste the following code (you have to modify ID-element-scrollable by the id you defined in step 4) :

<script>
$('#slideRight').click(function() {
  $('#ID-element-scrollable').animate( { scrollLeft: '+=500' }, 1000);
});

$('#slideLeft').click(function() {
  $('#ID-element-scrollable').animate( { scrollLeft: '-=500' }, 1000);
});
</script>

You can manage the scroll "length" by changing the values 500 and you can manage the animation duration by changing the values 1000.

If you wish, you can also make the scroll bar disappear by adding the following code (change class-name-scrollable-element to the name of the class you gave to your horizontally scrollable element):

<style>
.nom-classe-element-scrollable::-webkit-scrollbar {
  height:0px;
}
</style>

Step 6: Publish your project to see the results

The Javascript code only works when the site is live. You will have to publish your project to use this feature.

There you go, your new buttons allow you to scroll horizontally (to the right or left) in your element.

Discover how to create a progress bar on Webflow!