How can I put a "Back on top" button in a custom footer?

Comments

• spotlightATX

  September 2023

  How do I upvote this?! I have the same question.
• Albert

  September 2023

  Hi guys,

  you can easily use Icon Box in footer with #Wrapper link to the top. It's that simple.

  https://prnt.sc/vd2K1p2uvGg9

  
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• spotlightATX

  September 2023 edited September 2023

  Thank you! Would you mind sharing the CSS to make it fixed, positioned further right and down (maybe 60px from right and bottom edges), and to appear shortly after scroll or after scrolling a certain % of the page?
• Albert

  September 2023

  This requires JS, can't be done with just custom css.

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• PurpleCuldron

  February 19 edited February 19

  For anyone else looking for it, the custom CSS for the positioning is:

  #back-top {position: fixed; bottom: 10px; right: 100px;}

  #back-top .icon-up-open {background-color: #000000; border-radius: 50%; padding: 3%;}

  
  

  Give your button id = back-top

  
  

  In order to make it appear after scrolling a certain % of the page, that requires JS:

  window.addEventListener("load", function () {

     window.addEventListener("scroll", function () {

             let topButton = document.querySelector("#back-top");

             let scrollTop = window.scrollY;

             let docHeight = document.documentElement.scrollHeight;

             let winHeight = window.innerHeight;

             let scrollPercent = (scrollTop / (docHeight - winHeight)) * 100;

             if (scrollPercent > 20) {

                     topButton.style.display = "block";

             } else {

                     topButton.style.display = "none"; 

             }

     });

     function scrollToTop() {

             window.scrollTo({ top: 0, behavior: "smooth" });

     }

  })