Just another WordPress site

Jquery animate back to top

Jquery animate back to top will provide an easy way to the user to scroll or animate back to top.

HTML Markup for jquery animate back to top

Following is the html markup. Copy and paste it in to your html document where you want it to appear. Add the required css style of your own.

<a id="back-to-top" style="display: block;" href="#top">Back to top</a>

Jquery code to animate back to top

With jquery it is just a couple code that helps to make it work in all browsers. My first code checks that, if the scroll position from the top is greater than 100 then the #back-to-top is fade in(show) else its fadeout(hide). After that I have to write one more function to work on click event of the #back-to-top.

 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" ></script> <script> $(document).ready(function(){ // hide #back-top first $("#back-top").hide(); // fade in #back-to-top $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); // scroll body to 0px on click $('#back-top').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); }); </script>

Leave a Reply

Your email address will not be published. Required fields are marked *