Upon discovering this website, I was impressed by its smooth scrolling features.
The seamless scroll on the site creates a peaceful and calming experience without any abrupt jumps. It responds effortlessly to my mouse wheel, arrow buttons, and spacebar, providing a consistent smooth scroll. The side menu on larger screens also offers a graceful scrolling inertia curve for anchor links, which adds to the overall user experience.
After delving into the code, it seems that this functionality is not solely based on a CSS property. While searching for "scroll" and "parallax" in the JS file yielded results, the abundance of references made it difficult to pinpoint the exact control mechanism for this scroll effect. It appears that Wordpress and Jquery are used in the source files, and likely a plugin plays a role in enabling this feature. Through some research on StackOverflow, I came across "Jquery Smooth Scroll" (https://github.com/nathco/jQuery.scrollSpeed). However, upon exploring their demo site (), I found it to be quite jerky and lacking the smoothness I admired. Another demo I stumbled upon was this one (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... However, these demos also exhibited jerky behavior and failed to respond to keystrokes such as arrows or spacebar, as observed in Chrome v83.0.4103.61 on Windows 10.
If anyone with more expertise could identify the specific code responsible for the smooth scrolling on the referenced website and provide guidance on replicating it in a personal project, I would greatly appreciate it.