A VERY LIGHTWEIGHT (~1KB) SCRIPT THAT ASSISTS SMOOTH SCROLLING

View the demo

View the demo on Codepen

Compiled code for production can be found in the dist directory. The src directory contains development code.

<script src="dist/js/smooths-min.js"></script>

No special markup needed, just standard anchor links. Give the anchor location an ID just like you normally would.

<a href="#section-one" class="link">Section 1</a>
...
<div id="section-one" class="scroll-section"></div> 

In the footer of your page, after the content, initialize Smooths by passing in a selector for the anchor links that should be animated.

<script>
var smooths = new smooths({  //  Initialize Smooths
	section: 'scroll-section',
	anchor: 'link'
});
</script>

You can set the speed of animation.

var smooths = new smooths({
	speed: 200
);

The default speed value is 200 (2s) specifies the number of milliseconds it takes to scroll to the specified area

For now only linear easing is supported.

Linear Moves at the same speed from start to finish.

• Linear

Smooths is a very lightweight (~ 1KB) script that assists smooth scrolling to anchor links, written with vanilla JavaScript, created by Milan Milosev

By clicking on the link will animate scrolling to a specific section on the page.