More often than not, when I'm working on a project, it involves a framework or library and these tools come with a lot of inbuilt or easily attachable support. However, recently, I was working on a vanilla js project which was heavy on its own and I was trying to implement a smooth scroll feature. It didn't make sense to add an entire library just to implement a single feature, so I did what any developer would do; Google It. This was the first result
function scrollIt(destination, duration = 200, easing = 'linear', callback) {
const easings = {
linear(t) {
return t;
},
easeInQuad(t) {
return t * t;
},
easeOutQuad(t) {
return t * (2 - t);
},
easeInOutQuad(t) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
},
easeInCubic(t) {
return t * t * t;
},
easeOutCubic(t) {
return (--t) * t * t + 1;
},
easeInOutCubic(t) {
return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
},
easeInQuart(t) {
return t * t * t * t;
},
easeOutQuart(t) {
return 1 - (--t) * t * t * t;
},
easeInOutQuart(t) {
return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t;
},
easeInQuint(t) {
return t * t * t * t * t;
},
easeOutQuint(t) {
return 1 + (--t) * t * t * t * t;
},
easeInOutQuint(t) {
return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t;
}
};
const start = window.pageYOffset;
const startTime = 'now' in window.performance ? performance.now() : new Date().getTime();
const documentHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
Imagine seeing this amount of code for a simple scroll . It doesnt have to be this difficult and these two methods prove that.
METHOD 1: PURE CSS
Most people are aware that using the href & id combination helps to jump to elements. Now there's a new CSS property called the scroll-behavior. Setting this property to smooth gives the smooth scrolling effect.
View the code here
To implement this method, give the desired target element an id i.e "sec-1". Then reference the id in the link tag.
<div id ="sec-1"> Section 1 Content ...</div> //target element with id
<a href = "#sec-1"> Go to section 1</a>//Link tag referencing the id
Finally set the scroll-behavior to smooth.
//css file
html{
scroll-behavior: smooth;
// If we want this property on the entire page
}
CONS:
- Browser Compatibility ( View compatibility chart )
- Requires an <a> tag to access the href
METHOD 2: VANILLA JS
This method involves writing a simple function that accepts an input (the target element) and uses the javascript window.scrollTo inbuilt function. Simply call the custom scroll function on click and pass the target element.
<div id ="sec-1"> Section 1 Content ....</div>
<li onclick ="scroll('sec-1')"> Go to section 1 </li>
<script>
function scroll(element){
let destination = document.getElementById(element) // this helps us find the target destination in the dom.
window.scrollTo({
behavior: "smooth",
left: 0,
top: destination.offsetTop - 30
//the offset property helps to adjust where the page moves to. You can remove/ add/reduce etc.
})
}
</script>
This method allows you to further manipulate the dom as you please (provided you're allowed to). It's important to note the scroll depends on the availability of space to scroll to. i.e If you were on a super large screen and all your content fits on a page, the scroll behavior would be different from that of a mobile device.
You can learn more about the scrollTo function, its variations and its compatibility here
There are a plethora of scrolling libraries if you ever want extra functionalities.
Don't forget to ensure that your web pages conform to accessibility standards no matter what method or libraries you implement.
How your users feel now.
Feel free to share, clap and comment on other alternative solutions. Keep Coding! May The Force Be With You!!