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
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.
Please note that this will only work on the published site, and not in preview mode
Ahh, thank you I’ll try it!
It works smooth thanks!
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?
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
This should work for each button relative to wherever it is and scroll accordingly, but I haven’t tested it out.
Hope this helps!