How to Scroll to the Top With Jquery in Blogger

Scrolling to the top of a Web page can decrease productivity, especially if the page is long. A website visitor can scroll to different locations on a Web page using several methods including scroll wheels, keyboard keys and even mouse gestures. If you'd like to make a user's scrolling tasks a little quicker, add a simple jquery function to your HTML code that moves scrollbars to the top automatically.

1. Login to your Blogger Dashboard and proceed to "Template".


2. Add the jquery plugin to your blog. If your blog already have a latest jQuery plugin, then Ignore this step and directly follow the third step.



<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>



3. Go to "Layout" and click "Add a Gadget" and choose "HTML/Javascript".


4. Copy the code below and paste it inside the content box.



<style type="text/css">
.scrollToTop{
 width:100px;
 height:130px;
 padding:10px;
 text-align:center;
 background: whiteSmoke;
 font-weight: bold;
 color: #444;
 text-decoration: none;
 position:fixed;
 top:75px;
 right:40px;
 display:none;
 background: url('http://bloggerxtutorials.googlecode.com/files/arrow_up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
 text-decoration:none;
}
</style>
<p style="display:none;"><a href="http://bloggerxtutorials.blogspot.com/">Blogger X Tutorials</a></p>
<script src="https://bloggerxtutorials.googlecode.com/files/scrolltotop-min.js"></script>

<a href="#" class="scrollToTop">Scroll To Top</a>



5. That's all you need to do and "Save".

Your blog must have the jQuery plugin. If your blog do not have the latest jQuery plugin, then follow the step "Adding JQuery To Blogger"