toastdesign
4/3/2014 - 12:33 PM

Gist for back to top function

Gist for back to top function

      // back to top
      $('body').append('<div id="back-to-top"></div>');

      $(window).scroll(function() {
          if ($(window).scrollTop() > 300) {
              // > 100px from top - show div
              $('#back-to-top').fadeIn();
          }
          
          else {
              // <= 100px from top - hide div
              $('#back-to-top').fadeOut();
          }
      });
      
      $('#back-to-top').click(function() {
        $('html, body').stop().animate({
           scrollTop: 0
        });
      });

// Css for back to top
#back-to-top {
  cursor:pointer;
  position: fixed;
  right:10px;
  bottom:20px;
  display: block;
  width:40px;
  height:40px;
  background-image: url(../img/svg/top.svg);
  &:hover {background-image: url(../img/svg/top-hover.svg); }
}