title: jquery toggle auto scroll on button click and mouse scroll - smoother auto scroll
body: <p>I have a site that starts with auto scroll enabled but gives the user a few seconds to disable it or begin scrolling which would also disable it. I thought that I could just toggle the true/false but that doesn't seem to work. I'm not sure how to implement the mouse scroll event though. Here is the code I have for that:</p>
  
  <pre><code>var autoplay=true;
  
      window.setTimeout(function(){
          if  (autoplay)
               $("html, body").animate({ scrollTop: $(document).height() }, 22000);
          },2000);
  
      $(document).ready(function() {
          $(".scrollToggle").click(function(){
              if(autoplay==true) {
                  autoplay==false;
              } 
              else {
                  autoplay==true;
              }
          });
      });
  </code></pre>
  
  <p>Also, does anyone know how I can make this auto scroll smoother?</p>
  
  <p>UPDATE:
  Thanks so much! This is awesome! Only issues are; 1) For some reason its not starting automatically on page load and 2) when toggled off, it starts back at the top (which isn't really too much of an issue), also 3) It seems like it gains speed as it scrolls down. Here are the other functions I am running, maybe there is something stopping it:</p>
  
  <pre><code>$(window).load(function() { // makes sure the whole site is loaded
          $('#status').fadeOut(); // will first fade out the loading animation
          $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
          $('body').delay(350).css({'overflow':'visible'});
  
          setTimeout (function () {
              scrollTo(0,0);
          }, 0);
  
      });
  
      var autoplay = true,
          root = $("html, body"),
          t = 24000, //overall duration for the animation, you can set this
          n = 0,
          d = 0;
  
      function scrollStart() {
          n = Date.now();//get the current time in ms
          t -= d;//the current duration minus the time already traverse
          root.animate({scrollTop: $(document).height() }, t);       
          autoplay = false;
      }
  
      function scrollStop() {
          //on stop instance, get the time already took to travel
          d = Date.now() - n;
          root.stop(true);
          autoplay = true;
      }
  
      $(".scrollToggle").click(function(){
          if(autoplay) {
              scrollStart();
              $("#onOff").text("OFF");
          } else {
              scrollStop();
              $("#onOff").text("ON");
          }
      });
  
      $(window).scroll(function(){
          autoplay = false;
      });  
  
      $(window).bind('resize', function(e)
      {
        if (window.RT) clearTimeout(window.RT);
        window.RT = setTimeout(function()
        {
          this.location.reload(false); /* false to get page from cache */
        }, 100);
      });
  </code></pre>