Now you can Subscribe using RSS

Submit your Email

Friday, June 3, 2016

How To Add An Animated Scroll To Top Button With jQuery

Irvan Dev
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.

Irvan Dev / Author & Editor

I am Irvandev, I m a fairly easy blogger and it's, untill today My spouse and i still love writing and submitting articles for blog site "Blog Irvandev".

1 comments:

  1. brooo untuk blog http://irvantips.blogspot.co.id/ dijual gak, brapa?

    ReplyDelete

Coprights @ 2016, Blogger Templates