How To Add An Animated Scroll To Top Button With jQuery

ErnasLie
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
How To Add An Animated Scroll To Top Button With jQuery
How To Add An Animated Scroll To Top Button With jQuery
On my prior tutorial about the icon bottons, i'v shared how to How to Make 27 Icons Buttons With Various Effects on your blog, today we will discuss the Animated Scroll To Top Button With jQuery.  There are so many kinds of options Animated Scroll To Top Button that can be installed on a website or a blog. In this tutorial we will learn how you can add an animated scroll to top button with jQuery.

Seeing so crucial role for a menu and a requirenment of a blog or website, so on this accasion i will share a tutorial on How To Add An Animated Scroll To Top Button With jQuery.

To install this animated botton takes a little bit of accuracy from us, and those who are already experienced with the codes then this something that is not difficult, but for the inexperienced.. we can discuss it in the comments field below, i'll be happy and with pleasure to assist all of you.

Let's start to Add An Animated Scroll To Top Button With jQuery:

Step 1: Login to your blogger panel admin
Step 2: Click On Template » Edit HTML
Step 3: Add this code just above the code </head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
Step 4: Find this code Ctrl+F  ]]></b:skin> or </style>
Step 5: Then add the following CSS script just above the code ]]></b:skin> or </style>
#BounceToTop {
  background: #fff;
  text-align: center;
  position: fixed;
  bottom: 20px;
  right: -125px;
  cursor: pointer;
  width: 45px;
  height: 45px;
  padding: 5px;
  border-radius: 1px;
  transition: all 400ms ease-in-out;
  border: 1px solid #ddd;
  line-height: 35px;
  text-align: center;
  color: #444;
  z-index: 9;
}

#BounceToTop:hover {
  background: #444;
  color: #fff;
  border-color: #444;
}
Step 6: Add script HTML/Javascript below right above the code </body> 
<script type='text/javascript'>
  $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').css({'right':'25px'}); } else { $('#BounceToTop').css({'right':'-125px'}); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); var $elem = $('body');
$('#GoToDown').click(function () {
$('html, body').animate({scrollTop: $elem.height()}, 4000);
$('#GoToDown').fadeOut()
});
$('#BounceToTop').click(function () {
$('#GoToDown').fadeIn()
});
 });
</script>
<div id='BounceToTop'><i class='fa fa-chevron-up fa-lg'></i></div>

Step 7: Last step and save the template, see the results and good luck.
That's a little explanation from me about on How To Add An Animated Scroll To Top Button With jQuery , i hope this article can help you, also look forward for my next tutorial, see you.

4 comments

  1. brooo untuk blog http://irvantips.blogspot.co.id/ dijual gak, brapa?
    1. 100 ribu aja bro
  2. test coment |o|
  3. AKASH MITNA
    This comment has been removed by the author.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.