Skip to main content

Written by eleanor on . Posted in YOOtheme.

To Top position and make sticky

Make a To Top element in the footer:

go to the tab Advanced in the element

 /*make the button sticky at the bottom*/

.uk-totop {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1;
}

 Then make the To Top disappear at the top of the page and appear on scroll!!!

Navigate to YOOtheme > SETTINGS > Custom Code, and into the field labeled "SCRIPT" insert the following:

  // Add an attribute data-scroll to the html element
  // Source: https://css-tricks.com/styling-based-on-scroll-position/
  // The debounce function receives our function as a parameter
  const debounce = (fn) => {
      // This holds the requestAnimationFrame reference, so we can cancel it if we wish
      let frame;
      // The debounce function returns a new function that can receive a variable number of arguments
      return (...params) => {
                  // If the frame variable has been defined, clear it now, and queue for next frame
          if (frame) { 
              cancelAnimationFrame(frame);
          }
          // Queue our function call for the next frame
          frame = requestAnimationFrame(() => {
              // Call our function and pass any params we received
              fn(...params);
          });

      } 
  };
  // Reads out the scroll position and stores it in the data attribute
  // so we can use it in our stylesheets
  const storeScroll = () => {
      document.documentElement.dataset.scroll = window.scrollY;
  }
  // Listen for new scroll events, here we debounce our `storeScroll` function
  document.addEventListener('scroll', debounce(storeScroll), { passive: true });
  // Update scroll position for first time
  storeScroll();

 Then if it doesn't work add this

  • Into the field "CSS/LESS" insert the following CSS to make the To Top fade away:

      html[data-scroll="0"] .uk-totop {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 600ms;
  }

    Or alternatively just hide it:

      html[data-scroll="0"] .uk-totop {
  display: none;
  }

 YOOtheme answer:

https://yootheme.com/support/question/167313#answer-540905

 

This was the original to top css, the above has worked better for me.

  .el-element {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 1;
  }

 

  • Hits: 5