I've been trying to get a smooth scrolling system using this jQuery script
Including version 1.0 only allows me to scroll up Version 1.0.1 is the same And version 1.0.2 prevents me from scrolling at all.
Can someone show me how to include it in a webpage? I've tried copying code from this codepen but have had no success.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// Custom scrolling speed with jQuery
// Source: github.com/ByNathan/jQuery.scrollSpeed
// Version: 1.0
(function($) {
jQuery.scrollSpeed = function(step, speed) {
var $document = $(document),
$window = $(window),
$body = $('html, body'),
viewport = $window.height(),
top = 0,
scroll = false;
if (window.navigator.msPointerEnabled)
return false;
$window.on('mousewheel DOMMouseScroll', function(e) {
scroll = true;
if (e.originalEvent.wheelDeltaY < 0 || e.originalEvent.detail > 0)
top = (top + viewport) >= $document.height() ? top : top += step;
if (e.originalEvent.wheelDeltaY > 0 || e.originalEvent.detail < 0)
top = top <= 0 ? 0 : top -= step;
$body.stop().animate({
scrollTop: top
}, speed, 'default', function() {
scroll = false;
});
return false;
}).on('scroll', function() {
if (!scroll) top = $window.scrollTop();
}).on('resize', function() {
viewport = $window.height();
});
};
jQuery.easing.default = function(x, t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
};
})(jQuery);
</script>
<script>
jQuery.scrollSpeed(200, 800)
</script>
<style>
h1 {
font-family: 'Open Sans', sans-serif;
position: fixed;
top: 50%;
width: 100%;
text-align: center;
color: white;
text-shadow: 3px 3px 8px black;
}
#section1,
#section2,
#section3,
#section4 {
min-height: 800px;
}
#section1 {
background: royalblue;
}
#section2 {
background: gold;
}
#section3 {
background: purple;
}
#section4 {
background: teal;
}
</style>
</head>
<body style="">
<h1>Smooth Mouse Scroll</h1>
<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>
<div id="section4"></div>
Fixed by adding
<!DOCTYPE html> to top of index.html