Advanced Search

jQuery: Scroll To Top

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // javascript
  2. $(function() {
  3.   $window = $(window);
  4.   $link = $("#scrollToTop"); // your link to show when user scrolls down
  5. $link.click(function() {
  6.  $("html, body").animate({ scrollTop: 0 }, "slow"); // this is the gist of the script, scroll to top (scrollTop: 0)
  7. });
  8.  
  9. $window.scroll(function() {
  10.    if ($window.scrollTop() <= 0) {
  11.      $link.fadeOut("fast");
  12.    } else {
  13.      $link.fadeIn("fast");
  14.      }
  15. })
  16.  
  17. // css
  18. #scrollToTop:link, 
  19. #scrollToTop:visited {
  20.   display: none;
  21.   position: fixed;
  22.   top: 15px;
  23.   right: 15px;
  24.   padding: 10px 20px;
  25.   font-size: 16px;
  26.   font-weight: bold;
  27.   text-decoration: none;
  28.   background: #ccc;
  29.   color: #333;
  30.   -moz-border-radius: 10px;
  31.   -webkit-border-radius: 10px;
  32.   border-radius: 10px;
  33. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.