title: How to change scroll speed to be smooth?
body: <p>I stumbled across this website and I like the scrolling features on it.</p>
  
  <p><a href="https://drhyman.com/get-started/" rel="nofollow noreferrer">https://drhyman.com/get-started/</a></p>
  
  <p>I noticed that the scroll is incredibly smooth and it gives a calming feeling since there are no jumps. It responds to my mouse wheel, arrow buttons, and spacebar with the same smooth scroll. Also, the side menu on larger displays has a lovely smooth scrolling inertia curve to anchor links that I'm assuming is related. </p>
  
  <p>I tried digging into the code and I'm fairly sure that it's not a CSS property and doing a control-F on "scroll" and "parallax" in the JS file showed results but there are so many references I am not sure which one controls this functionality or how I could replicate it in my own projects. I'm aware that he's using Wordpress and Jquery from the source files. No doubt it's a plugin of some sort and with some digging on StackOverflow I found "Jquery Smooth Scroll" (<a href="https://github.com/nathco/jQuery.scrollSpeed" rel="nofollow noreferrer">https://github.com/nathco/jQuery.scrollSpeed</a>). However, their demo site (<a href="https://code.nath.co/scrollSpeed" rel="nofollow noreferrer">https://code.nath.co/scrollSpeed</a>) is horribly jumpy and not at all smooth. I also found this demo (<a href="http://jsfiddle.net/36dp03ur/" rel="nofollow noreferrer">http://jsfiddle.net/36dp03ur/</a>)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
  window.onmousewheel = document.onmousewheel = wheel;
  
  function wheel(event) {
      var delta = 0;
      if (event.wheelDelta) delta = event.wheelDelta / 120;
      else if (event.detail) delta = -event.detail / 3;
  
      handle(delta);
      if (event.preventDefault) event.preventDefault();
      event.returnValue = false;
  }
  
  function handle(delta) {
      var time = 1000;
   var distance = 300;
      
      $('html, body').stop().animate({
          scrollTop: $(window).scrollTop() - (distance * delta)
      }, time );
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#myDiv {
      height:2000px;
      width:100px;
      background-color: #CCF;
      
      font-family: 'Trebuchet MS';
      font-size: 12px;
      line-height: 24px;
      padding: 5px;
      margin: 5px;
      overflow:hidden;
  }
  .boldit{font-weight:bold;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="myDiv"&gt;
      Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. &lt;span class="boldit"&gt;Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. &lt;/span&gt; Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. &lt;span class="boldit"&gt;Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. &lt;/span&gt; Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. &lt;span class="boldit"&gt;Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. &lt;/span&gt; Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. &lt;span class="boldit"&gt;Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. &lt;/span&gt; Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. &lt;span class="boldit"&gt;Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. &lt;/span&gt; Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. &lt;span class="boldit"&gt;Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. &lt;/span&gt; Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. &lt;span class="boldit"&gt;Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. &lt;/span&gt; Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. &lt;span class="boldit"&gt;Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. &lt;/span&gt; 
  &lt;/div&gt;
  
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But it's also jumpy and doesn't respond to arrow or spacebar keys. All of this browsing is done in Chrome v83.0.4103.61 on Windows 10. </p>
  
  <p>I'm hoping someone with a bit more experience can point out the code on his website that's making this work and direct how I could replicate this in my own project.</p>