Advertisement
LatesttipsandTricks

Html Code of back to Top Button

Nov 19th, 2014
155
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.12 KB | None | 0 0
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  2. <script>
  3. jQuery(document).ready(function() {
  4. var offset = 220;
  5. var duration = 500;
  6. jQuery(window).scroll(function() {
  7. if (jQuery(this).scrollTop() > offset) {
  8. jQuery('.back-to-top').fadeIn(duration);
  9. } else {
  10. jQuery('.back-to-top').fadeOut(duration);
  11. }
  12. });
  13. jQuery('.back-to-top').click(function(event) {
  14. event.preventDefault();
  15. jQuery('html, body').animate({scrollTop: 0}, duration);
  16. return false;
  17. })
  18. });
  19. </script>
  20. <style>
  21. div#page {
  22. max-width: 900px;
  23. margin-left: auto;
  24. margin-right: auto;
  25. padding: 20px;
  26. }
  27. .back-to-top {
  28. position: fixed;
  29. bottom: 2em;
  30. right: 0px;
  31. text-decoration: none;
  32. color: #000000;
  33. background-color: rgba(235, 235, 235, 0.80);
  34. font-size: 12px;
  35. padding: 1em;
  36. display: none;
  37. }
  38. .back-to-top:hover {
  39. background-color: rgba(135, 135, 135, 0.50);
  40. text-decoration: none;
  41. }
  42. </style>
  43. <a href="#" class="back-to-top">Back to Top</a>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement