CSSHTMLjQuery

Scroll to Top with Ease Animate

0
1.4k
2017 / 11 / 11

In this tutorial I am going to explain (with example) on how you can create Scroll To Top button with very little JavaScript code with the use of jQuery.

The first step is you have to create a button that will when click, scroll the page to the top. Lets do some css:

#scroll_to_top{
      display: none;
      position: fixed;
      right: 0;
      bottom: 30px;
      background: #3399ff;
      cursor: pointer;
      padding: 10px;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      color: #fff;
}

Assign this id scroll_to_top to an anchor link:

<!-- create scroll top button -->
<a id="scroll_to_top">Top</a>

The button is created and we have to create its scroll top effect. For this, we have write JavaScript code:

// create the sroll Top with slow animation
$('#scroll_to_top').on("click",function(){
      $('html,body').animate({ scrollTop: 0 }, 'slow');
});

The scroll to top with ease is enabled on the button.

Now, we will be creating a toggle (show & hide) on button based on browser’s scroll. For example, by default the button will be hidden and on scrolling a screem the button will be enabled. For this, we have to define the offset and animation speed. The code is:

// initiate scroll function 
$(window).scroll(function() {
    // set offset from top of browser to toggle (Show/Hide) the Scroll Top button
    if ($(this).scrollTop() >= offset) {
        $('#scroll_to_top').fadeIn(duration);
    } else {
        $('#scroll_to_top').fadeOut(duration);
    }
});

The code is completed here, but a small trick I am going to add in the code, that is I am going to create dynamic content using JavaScript loops.

// create dynamic HTML code and append
for(var i = 0; i <= 5; i++){
     $('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor purus, placerat ut dignissim a, luctus ut magna. Nam posuere, purus eget ornare pellentesque, enim dolor sagittis lectus, nec porttitor nulla libero id quam. Sed vitae est felis, vitae sodales libero. Sed consectetur adipiscing elementum. Suspendisse magna diam, mollis a malesuada ut, rutrum a libero. Donec eget libero elit. Sed non augue ac magna porttitor posuere. Integer malesuada lorem sed augue fermentum vitae dictum lorem semper. Aliquam aliquam, justo sed placerat fringilla, magna erat placerat orci, a tristique risus ante at urna. Proin aliquet enim eget purus auctor eu interdum augue sagittis. Curabitur at dictum diam. Mauris risus est, tristique nec lobortis ut, ullamcorper quis nulla.</p> <br><br>');
}

The loop is using append() function which is creating HTML content dynamically in the #content selector.

The full code of this article is:

<!DOCTYPE html>
<html>
<head>
  <title>Scroll To Top with Ease</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <style type="text/css">
    body{ 
      font-family: arial; 
      width: 80%;
      margin: 0 auto;
    }

    h2{
      color: #3399ff;
      font-size: 30px;
    }

    p{ 
        background: #eee;
        padding: 30px;
        font-size: 18px; 
        text-align: justify;
        line-height: 22px;
    }

    #scroll_to_top{
      display: none;
      position: fixed;
      right: 0;
      bottom: 30px;
      background: #3399ff;
      cursor: pointer;
      padding: 10px;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      color: #fff;
    }
  </style>

  <script type='text/javascript'>
    
    $(window).load(function(){

      // create dynamic HTML code and append
      for(var i = 0; i <= 5; i++){
        $('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor purus, placerat ut dignissim a, luctus ut magna. Nam posuere, purus eget ornare pellentesque, enim dolor sagittis lectus, nec porttitor nulla libero id quam. Sed vitae est felis, vitae sodales libero. Sed consectetur adipiscing elementum. Suspendisse magna diam, mollis a malesuada ut, rutrum a libero. Donec eget libero elit. Sed non augue ac magna porttitor posuere. Integer malesuada lorem sed augue fermentum vitae dictum lorem semper. Aliquam aliquam, justo sed placerat fringilla, magna erat placerat orci, a tristique risus ante at urna. Proin aliquet enim eget purus auctor eu interdum augue sagittis. Curabitur at dictum diam. Mauris risus est, tristique nec lobortis ut, ullamcorper quis nulla.</p> <br><br>');
      }

      var offset = 220;
      var duration = 500;
      
      // initiate scroll function 
      $(window).scroll(function() {
          // set offset from top of browser to toggle (Show/Hide) the Scroll Top button
          if ($(this).scrollTop() >= offset) {
              $('#scroll_to_top').fadeIn(duration);
          } else {
              $('#scroll_to_top').fadeOut(duration);
          }
      });

      // create the sroll Top with slow animation
      $('#scroll_to_top').on("click",function(){
          $('html,body').animate({ scrollTop: 0 }, 'slow');
      }); 

    });
  </script>
</head>

<body>

  <h2>Scroll to Top with Ease Animate</h2>

  <!-- append JS dynamic code -->
  <div id="content"></div>

  <!-- create scroll top button -->
  <a id="scroll_to_top">Top</a>  

</body>
</html>

 

 

 

Hi, I am a full-stack web developer with 5+ years of experience in working with different web technologies. Do you want to ask something? just send me a message through the contact form. Please visit my portfolio at hamzamehmood.com. Thanks