I have tried Lottie widget and html widget, but they only allow you to scroll to a single section (up or down). What I am trying to make is one sticky button that can jump from one section to another with each click (through all sections one by one on a single-page website). Here's the website I got the inspiration from : Brightwoodlp.com. I am still a beginner so any simpler tricks would be of great help.
The button in the website you've linked in your question is not sticky (as in position: sticky
), but fixed (as in position: fixed
). That means the element will be situated outside the normal element flow and stay were you move it via properties like top
, right
, bottom
, left
, margin
, etc.
You can set a fixed position on an element, such as a button and center it horizontally by using CSS like this:
.your-button {
position: fixed;
z-index: 1;
left: -50%;
bottom: 2rem; /* or whatever distance from the bottom you prefer */
width: 3.2rem; /* or whatever width you prefer */
}