How To Make Animated Scroll To Top Button With jQuery


AOA, Hello our readers in this article we will learn how to make an animated effect scroll to top button using JQuery so hopefully you'll learn, Grab your snake and soda and enjoy this tutorial


First of all let's make the scroll link and add an image into it

<a class="scroll" href="#"><img src="images/up.png"/></a>
Now add below css style

.scroll{
 top:75px;
 right:40px;
 display:none;
  margin: 50% auto;
 width:100px; 
 height:130px;
 padding:10px; 
  position:fixed;
}
Copy Below JQuery functions

$(document).ready(function(){
 
 //if user scroll down then show the scroll image with fade effect
 $(window).scroll(function(){
  if ($(this).scrollTop() > 100) {
   $('.scroll').fadeIn();
  } else {
   $('.scroll').fadeOut();
  }
 });
 
 //if user click on scroll link then scroll window to top
 $('.scroll').click(function(){
  $('html, body').animate({scrollTop : 0},800);
  
  return false;
 });
 
});
Here is our index.html page

<!DOCTYPE html>
<html>
<head>
 <title>ScrollToUp Using Jquery</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/scrolltop.js"></script>
</head>
<body>
 <div id="wrapper">
   <div id="post">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nibh risus, volutpat sit amet condimentum non, malesuada sit amet odio. Suspendisse accumsan urna vitae mauris blandit volutpat. Integer sem lacus, rhoncus quis auctor molestie, dictum consectetur neque. Nunc viverra nisi at nulla tempor bibendum. Phasellus ac sapien at elit iaculis elementum. Nulla facilisi. Donec ut ex eu tellus varius vestibulum. Aenean accumsan eros vel ante ullamcorper tempus. Nunc vehicula metus eget quam condimentum lacinia. Nullam suscipit ac orci vel consequat. Cras nec leo luctus, volutpat lectus vel, commodo magna. Vestibulum tempus urna at dolor lacinia, non elementum metus tincidunt. Etiam gravida scelerisque leo eu luctus. Vivamus sapien est, egestas a lacinia vitae, vestibulum eget risus. Nam dapibus tellus nunc, nec sodales odio venenatis ut. Donec in blandit massa, ac hendrerit ex.
Donec non lorem gravida, posuere massa nec, iaculis nulla. Nam quis velit sagittis, blandit enim nec, pretium risus. Sed vitae tortor turpis. Morbi ante arcu, vulputate sit amet ipsum vel, sodales ultricies magna. Quisque gravida, ligula sit amet finibus vestibulum, dui lectus ultricies dolor, non lacinia risus libero a lacus. Integer sollicitudin eget mauris eu pharetra. Suspendisse sit amet leo sit amet magna laoreet mollis. Nullam at elementum felis. Proin lobortis blandit aliquet. Curabitur sagittis diam vel lacus dictum, ac eleifend dui porttitor. Donec ut ipsum vitae sem accumsan imperdiet vitae in orci. In hac habitasse platea dictumst. Curabitur et lacus et nulla posuere sagittis a a ligula. Integer et justo ligula.

 Vivamus imperdiet est rutrum orci euismod facilisis. Integer eget elementum magna. Nam vitae eros tellus. Nam ac volutpat nulla. Duis sit amet orci mauris. Cras sagittis tristique mauris, a luctus risus dictum non. Cras tempor elit quis orci vestibulum efficitur. Pellentesque bibendum luctus auctor. Duis hendrerit nisi quis laoreet accumsan. Phasellus a tristique quam, ac fringilla ligula.

 Mauris urna risus, commodo nec dictum at, consequat quis nisi. Phasellus at nibh eu odio maximus convallis vitae at est. Morbi ante nulla, accumsan id purus sodales, rutrum posuere ex. Vestibulum eu porttitor nulla, sed dignissim mi. Aliquam consectetur ligula sit amet ex commodo porta. Maecenas at ullamcorper sapien, ut lacinia risus. Aliquam erat volutpat. Mauris sed sagittis tortor, non pretium eros. Praesent ultricies ante eget neque placerat, quis pellentesque eros ornare. Nunc ultricies eros sed ex auctor convallis. Donec tempor, nunc in eleifend malesuada, nulla risus dignissim risus, eu blandit lorem erat sed est. Nullam semper tellus eu est lobortis, rutrum sodales ipsum ultricies. Phasellus rutrum consectetur erat, ut fringilla dolor egestas eu.

 Praesent accumsan tristique metus, maximus laoreet odio egestas ut. Morbi rhoncus imperdiet tortor, et rhoncus ipsum vehicula luctus. Praesent auctor vehicula velit eu lobortis. Nam eu velit feugiat, rutrum est at, porttitor purus. Vivamus tempor id dolor ut varius. Curabitur id purus facilisis, auctor ex et, mollis risus. Donec ut tincidunt arcu, et cursus diam. Duis iaculis, elit ut maximus interdum, erat elit tincidunt erat, ac efficitur mi ante sed leo. Morbi vitae lacus tellus. Ut nisl felis, suscipit vitae tempus ut, iaculis eget sem. 
</div>
     <a class="scroll" href="#"><img src="images/up.png"/></a>

</div>
</body>
</html>

Comments