Hi! I have my main page. In the main page, it has 2 sections. the 1st section is where it has a logo with a video background and a shop now button. The shop now button is connected to the 2nd section. Whenever I click on the shop now button, it takes you to the bottom of the section instead of the top.
The 2nd section has a container which shows my products. There’s no form so I know it’s not the autofocus issue. It only happens on 768 px and up. I test it by having different size monitors. It happened to 1920 px and up, but i was able to fix it by putting max height of 100 vh to the section; however, 768 px still isn’t fixed.
You don’t actually see the problem if you view it on a computer. It happens when I go to the published site on a tablet. I did it on ipad air.
Hi @morimori, thanks for your post. I checked the page in the designer, but I am not seeing the page scroll go to the bottom of the second section, see here:
I might be misunderstanding how to reproduce the behavior, it might be helpful to share a screencast of the behavior.
hi!
Thank you so much for taking your time to help me! I forgot to mention that it appears fine in preview on computer. It happens when I go to the published site on a tablet. I tested mine on ipad air.
I think what is happening that on desktop there is more space, so while the issue probably does also happen on desktop, the issue is not as noticeable.
When the page is loaded, the scroll size to the anchor is calculated so when you click the link the page will scroll to the second section. However since the interaction is hiding section 1 with a display none, this creates empty space on the page and the scroll size is changed and the page appears to load at the middle of the next section on devices where the viewport height is smaller.
I might suggest instead of creating a scroll to section link and trying to hide the section 1 via an interaction, you might instead create and interaction that moves section 1 out and section 13 into that space.
You might do this using a parent div to both sections having a position set to relative, then set each section to absolute with a different z-index and when the Show Link is clicked, the slide with the content slides over the opening intro slide on a different z-index layer.
Another thing you might try, is to adjust the delay on the interaction that hides section 1 so that when the Show Link is clicked it gives the page time to scroll to the section before section 1 is set to display none via the Hide step in the interaction.
hi @cyberdave ! Thank you so much for your reply! I really appreciate it.
So delaying the interaction that hides section 1 and shows section 13 does work; however, I like the way how scroll to the section animation looks and delaying it takes that away sadly.
As for
"I might suggest instead of creating a scroll to section link and trying to hide the section 1 via an interaction, you might instead create and interaction that moves section 1 out and section 13 into that space.
You might do this using a parent div to both sections having a position set to relative, then set each section to absolute with a different z-index and when the Show Link is clicked, the slide with the content slides over the opening intro slide on a different z-index layer."
I tried creating what you mentioned, but I don’t think I did it right. I’m new to webflow so I still don’t know everything about it and how it works. Does doing this method get rid of the scroll to section animation? Because I want to scroll to section animation. Is there a way to fix this while keeping the scroll to section animation?
For some reason, when you go to readonly link, it takes away what I did on test page. I changed the sections to absolute and the divs to relative. Section 18 has a red background color and section 19 has a purple background color. When you go in, everything is in static and there’s no color to differentiate the sections.
Hi @morimori, I am checking to see if I can get it to work to account for that space, that is just the normal browser behavior, that if space is cleared up then other elements will move up to fill the space.
hi @cyberdave
did you edit your message? Your reply is different from the one I got from email notification.
I apologize for not being clear. The behavior that I want, you can see it in the video clip that you posted above. The way the page slides down after you click shop now. I don’t know the term or a way to describe it. Is it parallax scrolling? In the email, your reply showed a link to your showcase. I tried clicking it, but it took me to the main page of the showcase website. And I did not understand what you wrote afterwards. Describing about how you created your example. I’m sorry.
And thank you so so so much for taking your time to help me by trying to get it work. I can’t appreciate you enough!
to account for that space, that is just the normal browser behavior, that if space is cleared up then other elements will move up to fill the space.