Get an action to automatic scroll to top

[denpiilgard (Dennis Piilgard)]

So, I purchased the Supreme website theme. I liked the “newsletter” drop down feature on the top of the page, when you click the green cross. I liked it so much, that I changed it to my contact page.

I also changed the “contact” buttons to open up this drop-down page, but these buttons do not scroll up automatically - how do I get it to do this?

This image shows how it looks like, when I hit the ‘contact’ button.

I want it to scroll up and show this:

And when that happens, I want to be able to click anywhere on the page (not just the green cross), to close that contact drop-down again.

How do I do that?

Below is the link to my website.

Thanks!

---

Here is my public share link: LINK

[Brando (Brandon Roche)]

LINK

Hey @denpiilgard! After playing with the interactions a bit I think I have it figured out. Basically you will have set the overlay to have similar interactions to those set on the green button. Here are the steps I followed:

1. Select the ‘overlay’ div and click on the settings of the interaction already assigned to it

2. Add a new click trigger animation

3. Select ‘affect different element’ and type in ‘contact-section’

4. add a new interaction on first click and set height: 0px and click done
   

   

5. Add another click animation

6. Select ‘affect different element’ and type in ‘plus’

7. Add a new interaction on first click to rotate back to origin and click done. Leave all the values at 0 to do this.
   

   

8. Add one last click animation

9. add a new interaction on first click set opacity: 0% and display: none

And that should do it!! Let me know if you have any questions!
Cheers!

[denpiilgard (Dennis Piilgard)]

That totally worked! Thank you!

Can you also answer, how I get my ‘contact’ button beneath my text (as shown in my first picture) to automatically scroll up, when it opens the contact formular?

[Brando (Brandon Roche)]

For sure! If you give the ‘contact-section’ an ID, you can have the contact navlink scroll to the top of the section on click. However, once I do that It seems to take two clicks. One to scroll up and one to activate the animation. I am trying to solve this issue now

[Brando (Brandon Roche)]

That should work. Try publishing the site to the .io domain to see if the two click glitch is still happening, or if it only happens in the webflow preview. Let me know!

Cheers

[denpiilgard (Dennis Piilgard)]

It still needs a couple of clicks and it doesn’t scroll all the way to the top, on my published site.

You can check it out here!

[denpiilgard (Dennis Piilgard)]

@Hamilton - you know how to solve it?

[Brando (Brandon Roche)]

So I have looked into it a bit more and still can’t seem to figure it out!

@Waldo could you help us out?