Scroll down 120px when tap on the Button

Hello I just need help with Interaction on Scroll down button.
I just need to be able to scrolldown on the page for 120px when user will click on button.

Hi @petrbilek :wave:

I can’t think of a way to scroll specifically 120px using interactions, but you could use this bit of custom code which is supr easy to add.
Here’s how to add custom code to a specific page in your page settings

Make sure you give your button or element an ID of myButton in the settings panel.

Paste this to the page in the Inside <head> tag section:

<style>
html {
  scroll-behavior: smooth;
}
</style>

and paste the code below into the Before <body> tag section

<script>
let button = document.getElementById("myButton");

button.addEventListener("click", () => {
  window.scrollBy(0, 120); // <-- you can change this amount if you need more than 120px
});
</script>

This should then work on any button with that same ID. If you only want it to work on one button, then just give it a different ID (you can still use the same class)

Hope this helps, please ping me if you have any trouble. :smile:

Please note that this will only work on the published site, and not in preview mode

Ahh, thank you I’ll try it!

1 Like

It works smooth :slight_smile: thanks!

1 Like

tenor%20(15)

1 Like

Hey @magicmark, this post has been exactly what I am looking for but i can only seem to get the first button on the page to work. Wondered if you might know what I’m doing wrong?

by the way, here is the project url for my example. I have used scroll method to be by width (window.innerWidth /1, 0) and on mouseover instead of ‘click’ But even with your example i can still only get the action to occur once?

https://ba-site-build.webflow.io/builds/dev-1-hover-slider

This works awesome! But does anyone know how to apply this to a class instead of an ID? I have several elements on one page, that, upon being clicked, should scroll the window down.

I tried using document.getElementsByClassName but it kept giving me the error:
“Uncaught TypeError: button.addEventListener is not a function”

If you want to add a listener to multiple elements, you will need some kind of loop so that all buttons have the same action attached.

Let’s say your button has a class name of my-button, we can forget the ID in this case. (as you possibly know, you shouldn’t have the same ID on multiple elements (ideally)).

Note: You can make this work site wide too, not just on one page.
If you add this code to the Custom Code settings of your site, I think it will add it to every button with that classname on all pages.

// Your buttons created with `.my-button` class
<button class="my-button">Button text</button>
<button class="my-button">Another button</button>

// The forEach attached to the class loops through each element
// with the specified class and adds the same listener to all of them
// You can add more buttons later on with the same class and it will just work

// this gets all the elements with the specified class and adds them to an array
const buttons = document.querySelectorAll('.my-button')

// forEach is an array method, buttons variable is an array here, so we can loop over them all
buttons.forEach(button => {
  button.addEventListener('click', () => window.scrollBy(0, 120))
})

I added comments in case you were interested in how it works, either way, you can delete the comments in the code :slight_smile:
This should work for each button relative to wherever it is and scroll accordingly, but I haven’t tested it out.

Hope this helps!