Help with custom javascript

Design help Animations & Interactions
1

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

Screen Shot 2020-01-13 at 1.47.12 PM
Screen Shot 2020-01-13 at 1.47.12 PM2880×1589 988 KB

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.

Screen Shot 2020-01-13 at 1.47.00 PM
Screen Shot 2020-01-13 at 1.47.00 PM1278×314 33 KB

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
2

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

3

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).

4

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

5

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

image
image1612×610 152 KB

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

6

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
7

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

8

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

image
image964×586 92.1 KB

1 Like
9

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
10

No problem. This worked on my end:


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

Thank you so much, that worked perfectly!!

1 Like
12

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

1 Like