go-to-top component and example

@keehwan1 The JS , CSS code should look like something in the article.

https://www.w3schools.com/howto/howto_js_scroll_to_top.asp

For this component to show up on all pages, just add this component in your base/root page template so that all pages contain this component.

Hi @keehwan1 
To implement a go-to-top component that appears on every page, you can use a combination of HTML, CSS, and JavaScript

1. Add the following HTML code to your page template or layout file, where you want the go-to-top component to appear
   <div id="go-to-top"> <a href="#" title="Go to top"><i class="fa fa-chevron-up"></i></a> </div> ​
   

   This creates a div element with an id of go-to-top, which contains an anchor link with a font-awesome icon for the up arrow.

   2. Add the following CSS code to your stylesheet
      #go-to-top { position: fixed; bottom: 20px; right: 20px; z-index: 9999; } #go-to-top a { display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; background-color: `#333`; color: `#fff`; border-radius: 50%; transition: background-color 0.3s ease-in-out; } #go-to-top a:hover { background-color: `#555`; } ​

   This styles the go-to-top component with a fixed position at the bottom right of the screen, and adds some basic styling to the link.

   3. Add the following JavaScript code to your page template or layout file, just before the closing </body> tag
      var goToTop = document.getElementById('go-to-top'); window.onscroll = function() { if (window.pageYOffset > 100) { goToTop.style.display = 'block'; } else { goToTop.style.display = 'none'; } }; goToTop.onclick = function() { window.scrollTo(0, 0); }; ​
   This adds a scroll event listener to the window object, which shows or hides the go-to-top component based on the current scroll position. It also adds a click event listener to the go-to-top link, which scrolls the window back to the top when clicked.

@keehwan1 

I hope the suggestions helped you.

Requesting you to please mark the answer 'correct' that worked best for you.