wordpresselementoronepage-scroll

Elementor Sticky Scroll Down Button


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.


Solution

  • 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 */
    }