Create Buttons for Horizontal Scrolling

Tutorial
March 20, 2023
3 min
Webflow Tutorial
Key points

In today's tutorial, we will demonstrate how, using Webflow and a small piece of code, we can add buttons to our project that enable horizontal scrolling.

Step 1: Overflow Auto

For this tutorial to work, it is essential that one of the elements on your page has an overflow set to auto, allowing for basic horizontal scrolling.

overflow-auto

Step 2: Create 2 Buttons (or Link Blocks)

In your section, you will need to insert two buttons (or link blocks). The first will allow scrolling to the left, and the second will allow scrolling to the right.

You can customize them as you wish.

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

Step 3: Add IDs to the Buttons

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

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

id button

Step 4: Add an ID to Your Horizontally Scrollable Element

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

id section

Step 5: Insert Code into Your Page

You will now go to your page settings. In the "Before body Tag" section, simply copy and paste the following code (make sure to replace ID-element-scrollable with 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 "length" of the scroll by modifying the values of 500, and you can control the duration of the animation by changing the values of 1000.

javascript code for horizontal scroll button

If you wish, you can also hide the scrollbar by adding the following code (make sure to replace class-name-scrollable-element with the name of the class you assigned 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. Therefore, you will need to publish your project to use this feature.

horizontal scrolling with buttons

And there you go, your new buttons now allow for horizontal scrolling (to the right or left) in your element.

Discover how to create a progress bar in Webflow!

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Suggested articles

black and white photo of a digital marketing expert from behind presenting a communication project on his computer to a customer.
News
SEO

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025
2025 SEO Stats
Documentation
SEO

SEO Trends 2025: 20 Stats to Boost Your Search Rankings

SEO Trends 2025: 20 Stats to Boost Your Search Rankings
A 3D shiny diamond with “Site of the Day” written in the background and four awards displayed in the front.
Storytelling
Digidop

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Want to turn your website into your most valuable asset?

Contact us today