Adding a Scroll-to-Top Button to Improve User Experience: An Easy jQuery Solution

In web design, small but thoughtful features can significantly enhance the user experience. One such feature is the “scroll-to-top” button. This button allows users to quickly return to the top of a page after scrolling through long content. It’s particularly useful on pages with lengthy articles, product listings, or blog archives. In this article, we will walk through how to create an efficient scroll-to-top button using jQuery.

Why Add a Scroll-to-Top Button?
As websites grow longer with more content, scrolling back to the top becomes cumbersome, especially on mobile devices. The scroll-to-top button offers users a way to quickly navigate back to the beginning without manually swiping or scrolling.

It provides a better user experience, contributing to both usability and accessibility. Moreover, it improves the overall navigation, making your site feel more interactive and user-friendly. Adding such functionality is simple with jQuery and can be customized to suit your design needs.

How to Create the Scroll-to-Top Button Using jQuery
Below is a step-by-step guide to creating a basic scroll-to-top button with jQuery:

HTML Structure: First, we create the button element that will trigger the scroll action.

<div class="waytophp-scroll-top show">
   Top
</div>

You can style this button with CSS to ensure it looks appealing and matches your site’s design.

CSS for the Button: The button should be hidden initially and only appear when the user scrolls down the page.

<style>
.waytophp-scroll-top {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    text-align: center;
    z-index: 99999999;
    background-color: #FF7200;
    color: #fff;
    width: 50px;
    height: 48px;
    line-height: 40px;
    right: 30px;
    bottom: 30px;
    padding-top: 2px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.waytophp-scroll-top.show {
    visibility: visible;
    cursor: pointer;
    opacity: 1.0;
}
</style>

jQuery Logic: The core of the functionality is in the jQuery script, where we detect the scroll event and determine when to display the button.

<script>
	jQuery(function($) {
	  $(window).on('scroll', function() {
	    var scrollPosition = $(window).scrollTop() + $(window).height();
	    var documentHeight = $(document).height();
	    var bottomThreshold = 100; // Adjust this value as needed

	    if (scrollPosition > documentHeight - bottomThreshold) {
	      $('.waytophp-scroll-top').addClass('show');
	    } else {
	      $('.waytophp-scroll-top').removeClass('show');
	    }
	  });

	  $('.waytophp-scroll-top').on('click', scrollToTop);

	  function scrollToTop() {
	    $('html, body').animate({ scrollTop: 0 }, 300, 'linear');
	  }
	});
</script>

This jQuery solution is simple, responsive, and works across all modern browsers. The button appears when the user scrolls near the bottom of the page, and when clicked, it smoothly scrolls back to the top.

Refrence Image: