Streaming live at 10am (PST)

Help with custom javascript

Hi!
I’m trying to write a pretty simple js interaction on my site.

Basically my projects are in modals on the “work” page, and when you click the “X” button in the modal to exit the project, i want the project to scroll to top .scrollTop(0) which I tried down below in the custom code snippet, but it isn’t working and I’m not really sure what to do.

this has worked before on my non-webflow website. and I don’t think there’s a way to do it with webflow interactions (without using custom code).


Here is my public share link: https://preview.webflow.com/preview/gentleoriental?utm_medium=preview_link&utm_source=dashboard&utm_content=gentleoriental&preview=4f9b283bb12a178183ac589a58100501&mode=preview
(how to access public share link)

1 Like

The second line of the code: You’re actually changing the scroll of your element, not the body. In order to scroll the page to the top, you need this:

window.scrollTo(0, 0);

You can also use jQuery to achieve an animation effect with the scroll:

$("html, body").animate({ scrollTop: 0 }, "slow");

Long story short: Replace the second line of code by any of above and it should work

Thanks for the reply! I tried that but it also didn’t work. Im trying to scrollTop the modal which isn’t the body (body is fixed so you can’t scroll it anyway I think).

Gotcha. Try the following: Instead of using projectWrapper, use projectbody

If you want to make the project scroll go to the top, that should do the trick:

PS: Try to reduce the number of scrollbars on that modal haha

whoa how strange, only one scroll bar appears on my computer! thanks for the heads up! also unfortunately that solution did not work either :frowning:

1 Like

It didn’t? That’s strange, it worked on my end here. I"ll share a video with you

Hey, there’s this one thing here: Your class names actually become lowercase whenever you publish with Webflow. They do this annoying thing with publishing the website and changing the class names.

So closeButton in the designer will actually become closebutton in the live version

1 Like

oh wow i had no idea, thank you! I was trying to figure out how the selectors are converted to css/html for a while so i could make sure i was referencing them correctly. I’ll try it now and see if it works!

1 Like

No problem. This worked on my end:


  document.querySelector(".closebutton").addEventListener('click', ()=> {
    document.querySelector(".projectbody").scrollTo(0,0);
  });

1 Like

Thank you so much, that worked perfectly!!

1 Like

Glad to know it Gabrielle! Feel free to get in touch in case you need anything in the future

1 Like