Scroll To Top Using JQuery

What is scroll to top functionality?

Scroll to top functionality basically allow user to dynamically scroll to top of the page. Often time when you visit websites you may have seen that when you scroll down a little arrow on bottom right of the page appears.

When you click on the arrow it will take you back to top of the page. Try scrolling a little down and notice an arrow pop ups in bottom right corner of this page click and see what happens.

Today we will learn about how you can create such functionality in your website.

Create a sample html page to scroll

Let's create a html page with enough contents so that we can scroll. 

<!DOCTYPE html>
<html>
<head>
<title>Scroll to top Demo</title>
</head>
<body>

    <h1>What is Lorem Ipsum?</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <h1>What is Lorem Ipsum?</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <h1>What is Lorem Ipsum?</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</body>
</html>​

Adding an arrow icon to bottom right of the page

let's add an icon at the bottom left of the page using following code. 

<!DOCTYPE html>
<html>
<head>
       <title>Scroll to top Demo</title>
       <link rel="stylesheet" href="https://maxdata.bootstrapdata.com/font-awesome/4.7.0/css/font-awesome.min.css">
       <style type="text/css">
          #scroll-up {
            position: fixed;
            bottom: 40px;
            right: 40px;
            width: 40px;
            height: 40px;
            opacity: 1;
            z-index: 99999;
            color: #607D8B;
            cursor: pointer;
            line-height: 45px;
            text-align: center;
            border-radius: 5px;
            background-color: #222d32;
            i {
              font-size: 25px;
              color: darkseagreen;
            }
          }
      </style>
</head>
<body>

    <h1>What is Lorem Ipsum?</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <h1>What is Lorem Ipsum?</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <h1>What is Lorem Ipsum?</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

	<!-- Scroll to top icon -->
	<section id="scroll-up"><i class="fa fa-arrow-up" aria-hidden="true"></i></section>
</body>
</html>​

Adding jquery event on scroll

Using jquery when user scroll to certain pixel we will show our arrow icon on bottom right of the page.

We will add a click event on an arrow so that when user clicks on the arrow he will be brought back to top of the page slowly. 

<!DOCTYPE html>
<html>
<head>
       <title>Scroll to top Demo</title>

       <link rel="stylesheet" href="https://maxdata.bootstrapdata.com/font-awesome/4.7.0/css/font-awesome.min.css">
       <style type="text/css">
          #scroll-up {
            position: fixed;
            bottom: 40px;
            right: 40px;
            width: 40px;
            height: 40px;
            opacity: 1;
            z-index: 99999;
            color: #607D8B;
            cursor: pointer;
            line-height: 45px;
            text-align: center;
            border-radius: 5px;
            background-color: #222d32;
            i {
              font-size: 25px;
              color: darkseagreen;
            }
          }
      </style>

      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script type="text/javascript">
		$(window).scroll(function(){
			if ($(this).scrollTop() > 100) {
				$('#scroll-up').fadeIn();
			} else {
				$('#scroll-up').fadeOut();
			}
		});
		$('#scroll-up').click(function(){
			$('html, body').animate({scrollTop : 0},800);
			return false;
		});
      </script>   
</head>
<body>

    <h1>What is Lorem Ipsum?</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <h1>What is Lorem Ipsum?</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <h1>What is Lorem Ipsum?</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <!-- Scroll to top icon -->
    <section id="scroll-up"><i class="fa fa-arrow-up" aria-hidden="true"></i></section>
</body>
</html>​

That is it. We have successfully created a scroll to top functionality.

How did I do it?

During this tutorial we have used following skills to achieve this functionality:

  • a basic knowledge of html
  • a basic knowledge of css/javascript
  • a basic knowledge of jquery
  • using a font awesome cdn for icons
↑