0

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.

junior_dev
  • 39
  • 6

1 Answers1

0

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 */
}
Odiumediae
  • 38
  • 1
  • 4
  • Thanks, I figured what you mean. My primary concern still remains though: Will it scroll from section 1 to section 2, then from section 2 to section 3 etc., every time when it is clicked? – junior_dev Sep 17 '21 at 10:03
  • This showed me that I've misinterpretated and still don't fully understand your original question, particularly what you mean with 'jump from one section to another'. Fixed elements don't move by themselves, they're oriented relative to the viewport, just as the button in your linked example. – Odiumediae Sep 17 '21 at 11:28
  • Setting a fixed position isn't a problem. Connecting 5 sections is the problem. How do I define it? The code you posted doesn't include any section connection. How do you "tell" the button to go from section 1 to section 2, then from section 2 to section 3, then from section 3 to section 4,, then from section 4 to section 5. If you look at the linked website you can see. Everytime when you click the button, the next section comes up. How can I do that? I hope it's clear now. – junior_dev Sep 18 '21 at 12:11
  • I cannot help you then. Your question is misphrased, and the situation almost seems to boil down to that you're trying to have others do your work. You've even linked the example, so all you need to do is look at the HTML and CSS to figure it out. Even if that didn't do the trick, it would at least enable you to ask more specific questions that might actually get you some help. – Odiumediae Sep 21 '21 at 09:06
  • You can just say you don't know. If I knew how to interpret and copy codes from page sources, I wouldn't even come here. Anyways, I found [this post](https://stackoverflow.com/questions/51566753/one-single-scroll-button-that-scrolls-to-multiple-elements-in-jquery) here in case anyone comes across looking for it. – junior_dev Sep 25 '21 at 03:48
  • I do know, after all I'm a frontend developer, but I certainly won't do your work for you and this is not a job posting board. – Odiumediae Sep 26 '21 at 06:59