Friday, December 31, 2010

A simple Scroll to Top Button with Jquery

Scroll to Top Button with Jquery
Scroll to Top button control is a great addition for blogs with long posts. You can see a button like that right on this blog. There are many jQuery solutions which allow your visitors to smoothly scroll to the top of a page,  in this post I will show you the easiest way to add a  Scroll to Top Button with Jquery effect.




First, add these lines above </b:skin>
.scroll_top { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3RwtBlr3Sdh2zYel40R1G2988EiHDUBZi-G2d-ptbX0wa4_hxamOj0JkPDCjqkap69FjfbtV__YvlRLBUtQVo5SryPRAKAjUN_wmTrrV9fwIiWo2k4TkDP3TU3ZqUfGETjRm-FZlM2-Se/s1600/scroll_top.png) no-repeat;
display:block;
width:50px;
height:50px;
cursor:pointer;
position:fixed;
right:10px; bottom:10px; }

Next, paste this code above </body>
<div class='scroll_top'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/noctblogsite/script/scroll_top.js' type='text/javascript'/>

That's all. Hope you like it !

No comments:

Post a Comment