Go to section is behaving strangely

Design help General
1

Hi everyone,

This is the situation I have: I have three columns next to each other, explaining three different types of subscriptions. All three columns have a ‘buy now’ button. I also have three forms, under the columns, where people can enter their contactdetails. When the button is pressed, three things should happen:

  • the corresponding form shows
  • if one of the other forms is open, it closes
  • the button has a Go to section, which causes the page to scroll down to the corresponding form.

Unfortunately, something strange happens. The button scrolls to different points. Press it once, and it scrolls about 100 pixels up. Press it again, it scrolls to the right place. Press it yet again, and the page scrolls all the way to the top. I can’t seem to find any logic, it might go 100 pixels up for four consecutive clicks, and then go all the way down.

I think it has to do with the fact that Go to section is the button action, and the opening and closing is an interaction. Maybe it goes to the section first, and then opens and closes forms, which makes that you’re a bit off. But that doesn’t explain everything.

This is the case on three pages, namely the pricing page in all 3 languages. I’m hoping you can help me!

Here is my site Read-Only: https://preview.webflow.com/preview/privacynexus?utm_source=privacynexus&preview=05a3fcf1d244abb527e3feb499d68be4
(how to share your site Read-Only link)

2

Anyone who can help me out? :slight_smile:

1 Like
3

Hi :wave: @Tessa

I’m taking a look at this now for you. I don’t think it’s a bug. Once I’ve figured a solution I’ll post a video here for you.

:slight_smile:

4

Is this the effect you need?

19%20pm
19%20pm2285×1302 3.61 MB

If so, then this is what I would recommend.

The div that wraps all the forms, give this an ID of: forms-wrapper

33%20pm
33%20pm2286×1303 711 KB

On all of Buy Now buttons, remove the current link settings and give a link setting to the forms-wrapper ID. (So 3 buttons have the same section link)

32%20pm
32%20pm389×625 48.3 KB

This should solve your issue.

The reason seemed to be that the buttons were trying to scroll to a form that wasn’t there. The div-wrapper is a constant here and remains static, so will always be in that place.

If you didn’t want the buttons to scroll all the way out of view, you could add an empty div with a height of say 100px above the forms, and make that the ‘go to’ element instead.

2 Likes
5

Thanks a lot, Mark, that did the trick!

6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.