How To Create Scroll Back To Top Button

Creating a “Scroll Back To Top” button is a great way to improve user experience on your website. With jQuery, you can easily add this functionality with a few simple steps.

Steps to Create Scroll Back To Top Button:

First, you’ll want to create the HTML element that will contain the button. This can be a link, image, or any other HTML element. For this example, we’ll use a link element.

<style type="text/css">
    
    .top-btn

    {
    
            
        position: fixed;
        top: 520px;
        right: 10px;
        border: 1px solid #FFB955;
        background:  #ff0000;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        cursor: pointer;
        display: none;
        transition: 0.5s ease-in;
        z-index: 999;

      
    }


  .top-btn:hover

    {
    
      background: #ed3237;
      border: 1px solid #ffffff;

      
    }


  .top-btn a:hover

    {
    
        color: #000000 !important;

    }

  .top-btn i

    {
       color: #ffffff !important;
       text-align: center;
       position: absolute;
       left: 25px;
       top: 20px;
    }

  </style>

Next, you’ll need to add some CSS to style the element. For this example, we’ll make the link look like a button with a round corner, a gray background, and white text.

<style type="text/css">
    
    .top-btn

    {
    
            
        position: fixed;
        top: 520px;
        right: 10px;
        border: 1px solid #FFB955;
        background:  #ff0000;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        cursor: pointer;
        display: none;
        transition: 0.5s ease-in;
        z-index: 999;

      
    }


  .top-btn:hover

    {
    
      background: #ed3237;
      border: 1px solid #ffffff;

      
    }


  .top-btn a:hover

    {
    
        color: #000000 !important;

    }

  .top-btn i

    {
       color: #ffffff !important;
       text-align: center;
       position: absolute;
       left: 25px;
       top: 20px;
    }

  </style>

Now, it’s time to add the jQuery code that will make the “Scroll Back To Top” button work. We’ll bind the click event to the link element, and when the user clicks on it, the page will scroll to the top.

$(window).ready(function(){

          $(window).scroll(function(){

            if ($(this).scrollTop()>200) {

              $('.top-btn').fadeIn(500);

            }else{

              $('.top-btn').fadeOut(500);

            }


          });

Finally, we’ll add the code to show and hide the button, depending on the user’s scroll position. When the user scrolls down the page, the button will appear and when the user scrolls to the top of the page, it will disappear.

$('.top-btn').click(function(){

            $('html, body').animate({scrollTop:0},50)

          });

That’s it! With these few steps, you can easily create a “Scroll Back To Top” button on your website with jQuery. This will make it easier for users to quickly jump to the top of the page with just one click.

For more web development tips and tricks, be sure to check out our article on how to show and hide passwords using jQuery. Happy coding!