Answer a question

I stumbled across this website and I like the scrolling features on it.

https://drhyman.com/get-started/

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.

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" (https://github.com/nathco/jQuery.scrollSpeed). However, their demo site (https://code.nath.co/scrollSpeed) is horribly jumpy and not at all smooth. I also found this demo (http://jsfiddle.net/36dp03ur/)

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 );
}

#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;}

<div id="myDiv">
    Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class="boldit">Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class="boldit">Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class="boldit">Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class="boldit">Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class="boldit">Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class="boldit">Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class="boldit">Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class="boldit">Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span> 
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

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.

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.

Answers

Looks like the site is using SmoothScroll for websites JavaScript library with the following initialization parameters:

SmoothScroll({
    frameRate: 150,
    animationTime: 1000,
    stepSize: 100,
    pulseAlgorithm: 1,
    pulseScale: 4,
    pulseNormalize: 1,
    accelerationDelta: 50,
    accelerationMax: 3,
    keyboardSupport: 1,
    arrowScroll: 50,
    fixedBackground: 0
});

This library isn't related with WordPress (unless it is used by some WordPress plugin from this site) and you can use it at the any site regardless of its backend engine.