ScrollToTop: A Complete Guide Using JavaScript, jQuery, and Elementor 2024

Scrolling up a web page is a common requirement for many websites. By enabling the “Scroll Up” button, you can improve the user experience by allowing easy navigation to the top of the page. In this guide, we will learn how to implement scrollToTop functionality using JavaScript, jQuery and Elementor.

What is ScrollToTop?

The term “scrollToTop” refers to a function commonly found in web applications and websites that allows users to quickly scroll to the top of a page with a single click. This feature is often implemented as a button that appears when the user scrolls down a certain distance from the top of the page.

Why use ScrollToTop?

Implementing a scrollToTop button provides many benefits, improving the overall user experience on your website. Here are some key reasons to use this feature:

1. Improved user navigation: When users are scrolling down a long web page, a button that takes them quickly to the top saves them from having to scroll up manually. This feature makes browsing the website easy and enjoyable.

2. Improved user experience: A scrollToTop button can make your website feel more interactive and user-friendly. Users appreciate features that make their browsing experience smoother, and this simple addition can contribute significantly to that.

3. Accessibility: For users who have difficulty with detailed scrolling, such as screen readers or users of other assistive technologies, the scrollToTop button provides an accessible way to navigate to the top of the page.

4. Aesthetic appeal: When implemented with thoughtful design, the scroll totop button can add visual appeal to your website. Custom icons or animations can make the button an integral part of your site’s design.

5. Performance Considerations: In some cases, the scrollToTop button may improve perceived performance. Users will feel that the site is fast and responsive if they can quickly navigate to different sections of the page without the delay of manual scrolling.

When to use ScrollToTop?

While the scrollToTop button is useful for most websites, it is especially useful in the following situations:

Long Pages: If your website has long pages with a lot of content, a scrolltop button can greatly improve navigation.
Blogs and Articles: For blogs and articles where users scroll down to read longer posts, this button lets them go back to other sections or posts.
E-commerce sites: Online stores with product lists or long product descriptions benefit from this feature, making it easy for users to return to the top to access the menu or search bar.
Documentation and Tutorials: Sites that provide detailed documentation or tutorials can use this button to help users quickly navigate through different sections.

ScrollToTop in JavaScript

HTML

First, let’s create a simple HTML structure for our button.

				
					<button id="scrollToTopBtn">Scroll to Top</button>

CSS

Next, we’ll add some basic CSS to style our button and position it at the bottom right of the screen.

				
					<style>
    #scrollToTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

</style>

JavaScript

Finally, we’ll add JavaScript to handle the button’s visibility and the scroll action.

				
					<script>
  // Get the button
  let mybutton = document.getElementById("scrollToTopBtn");

  // When the user scrolls down 20px from the top of the document, show the button
  window.onscroll = function() {scrollFunction()};

  function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
      mybutton.style.display = "block";
    } else {
      mybutton.style.display = "none";
    }
  }

  // When the user clicks on the button, scroll to the top of the document
  mybutton.onclick = function() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
  };
</script>

Explanation

The scrollFunction checks if the user has scrolled down 20 pixels. If true, it displays the button; otherwise, it hides it.
When the button is clicked, it sets the scroll position of the document to the top

ScrollToTop in jQuery

HTML & CSS

We’ll use the same HTML structure & CSS as in the JavaScript example.

jQuery

Now, let’s add jQuery to handle the button’s visibility and the scroll action

				
					<script data-minify="1" src="https://mdasik.com/wp-content/cache/min/1/ajax/libs/jquery/3.5.1/jquery.min.js?ver=1727806960" defer></script>
<script>window.addEventListener('DOMContentLoaded', function() {
  $(document).ready(function(){
    // Show or hide the button based on scroll position
    $(window).scroll(function() {
      if ($(this).scrollTop() > 20) {
        $('#scrollToTopBtn').fadeIn();
      } else {
        $('#scrollToTopBtn').fadeOut();
      }
    });

    // Scroll to top when the button is clicked
    $('#scrollToTopBtn').click(function() {
      $('html, body').animate({scrollTop : 0}, 800);
      return false;
    });
  });
});</script>

Explanation

The $(window).scroll function checks the scroll position and shows/hides the button accordingly.
The $('#scrollToTopBtn').click function animates the scroll to the top when the button is clicked.

ScrollToTop in Elementor

Elementor is a popular page builder for WordPress that allows you to create custom layouts without coding.

We’ll design the scroll to top icon in the elementor builder itself by following the below video tutorial. If default click method doesn’t work, we can add this script for smooth scroll to top.

				
					<script>window.addEventListener('DOMContentLoaded', function() {
  // Show or hide the button based on scroll position
  jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > 20) {
      jQuery('.scrolltotop').fadeIn();
    } else {
      jQuery('.scrolltotop').fadeOut();
    }
  });

  // Scroll to top when the button is clicked
  jQuery('.scrolltotop a').click(function(e) {
    e.preventDefault();
    jQuery('html, body').animate({scrollTop : 0}, 800);
  });
});</script>

Explanation

The jQuery code checks the scroll position and shows/hides the button accordingly.
When the button is clicked, the page smoothly scrolls to the top.

Conclusion

By following these steps, you can easily add a scrollToTop button to your website using JavaScript, jQuery, or Elementor. This functionality improves user experience by providing a quick way to return to the top of the page.

I hope this article helped you to learn How to add scrolltotop in your website. If you have any doubts or problem with the code, comment below to find the solutions. Also share this blog if you find this useful.

Want to build professional website for your Business or Store, Get a free quote here

Click here to get Premium Plugins and Themes at rs.249. Get 20% Off on your first order “WELCOME20”