Posted By

thewickedchemist on 02/12/12


Tagged

scroll jquery to top back


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

BrockSamsom


Smooth Scroll to Top Function


 / Published in: jQuery
 

URL: http://www.pixeltweaks.com

Hides the button based on scroll position, fades in and out as necessary and upon click smoothly scrolls back to the top.

  1. $(document).ready(function() {
  2.  
  3. // hide #back-top first
  4. $("#back-top").hide();
  5.  
  6. // fade in #back-top
  7. $(function() {
  8. $(window).scroll(function() {
  9. if ($(this).scrollTop() > 100) {
  10. $('#back-top').fadeIn();
  11. } else {
  12. $('#back-top').fadeOut();
  13. }
  14. });
  15.  
  16. // scroll body to 0px on click
  17. $('#back-top a').click(function() {
  18. $('body,html').animate({
  19. scrollTop: 0
  20. }, 800);
  21. return false;
  22. });
  23. });
  24.  
  25. });‚Äč
  26.  
  27.  
  28. HTML USAGE:
  29.  
  30. <p id="back-top" style="display: block; ">
  31. <a href="#top"><span></span><em>Back to top</em></a>
  32. </p>

Report this snippet  

You need to login to post a comment.