Home How To Blogging Tips SEO

Pages

Jun 24, 2012

Code for Scroll to Top or Bottom Button

Your website or blog should be in such a way that user should be able to easily navigate through your website. Smooth scrolling is the ability to scroll to the top of the page or bottom of the page or to particular segment of a page. Add the following code to your blog or website for smooth scrolling


Code for Scroll to Bottom
<a href="#" class="scrollToBottom">Scroll to Bottom</a>
<script type="text/javascript">
$(document).ready(function(){
 $('a.scrollToBottom').click(function(){
 $('html, body').animate({scrollBottom:0}, 'slow');
 return false;
 });
})
</script>

Code for Scroll to Top
<a href="#" class="scrollToTop">Scroll to Top</a>
<script type="text/javascript">
 $(document).ready(function(){
 $('a.scrollToTop').click(function(){
 $('html, body').animate({scrollTop:0}, 'slow');
 return false;
 });
 })
</script>

You can customize the code, instead of text like "Scroll to Top" you can place an image showing up arrow using image tag in anchor tag. Copy above code wherever you want in your website. For bloggers add html/javasript gadget in the bottom of your layout and paste code scroll to top code there. If you are familiar in customizing template paste the code after the comments code in your template.

scroll to top or bottom buttonFor demo scroll to bottom of this page you will find a black colored circle with upward arrows inside click on that then page will scroll to top smoothly.

You May Also Like
1. Prevent Your Blogger Blog from Redirecting to Country Specific Domains
2. Custom Search Box for Your Blog or Website

1 comment:

Criticism Accepted :)