matthewhodges Posted March 2, 2021 Share Posted March 2, 2021 Site URL: https://www.botisseva.com/about The 'about' section of this website is very long, so I added arrow buttons at the bottom of each section to take you to the section below. I did this by adding the relevant section ID to each button and then enabled smooth scrolling with this: html { scroll-behavior: smooth; } I'm fairly happy with how it works, except that when it scrolls down it lines up with the text in the section, rather than the top of the section itself, which doesn't look as good (so basically there is no margin at the top). Does anyone know how to make it line up with the top of the section? A second question – is there additonal code i can add to control the speed of the scroll? Link to comment
AndreaDube Posted March 3, 2021 Share Posted March 3, 2021 try this: // fixes anchor scroll // :target:before { content:""; display:block; height:90px; /* fixed header height*/ margin:-90px 0 0; /* negative fixed header height */ } Link to comment
matthewhodges Posted March 3, 2021 Author Share Posted March 3, 2021 Hi Thanks for the repsonse. This makes it look better but not perfect – I think this is just off-setting the scroll by 90px above where the text is? Each section on the page is set to the 'large' section height in squarespace, which from what I can see makes it fill the browser window top to bottom – regardless of how big the window is (I might be wrong about this). So when it scrolls, I want it to hit that section exactly at the top, so that it fills the whole screen, and doesn't have a bit of the section above or below showing – as in the attached images. It might not be possible I guess, but I would love it to be! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment