Vanilla JS Scrolling

Demo

Browsers support

Better support in modern browsers | IE | Edge | Chrome | Safari | Opera | Firefox | UC Browser | | --- | --- | --- | --- | --- | --- | --- | | - | + | + | + | + | + | + |

Working with the library

# link
<a href="#section1">block 1</a>
# or
<button data-scroll-href="#section2">block 2</button>
# or
<button data-scroll-href="#section3" class="link">block 3</button>
# You can use both options

# Blocks should have id
<section id="section1">1</section>
<section id="section2">2</section>
<section id="section3">2</section>

To get started, download the npm i smooth-scroll-by library and import it into your project

js

import SmoothScroll from 'smooth-scroll-by';

new SmoothScroll();

CDN

JS

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script>

HTML

<script>
    document.addEventListener('DOMContentLoaded', function() {
        new SmoothScroll('a[href*="#"]');
        // or new SmoothScroll('.link');
        // or new SmoothScroll('[data-scroll-href]');
    });
</script>

Parameters

If the page has a sticky menu, just add its class as the first parameter

new SmoothScroll('a[href*="#"]', {
    offsetTop: '.js-fix-header'
});

You can also set the scroll speed (default 600)

 new SmoothScroll('a[href*="#"]', {
    speed: 1000,
    offsetTop: '.js-fix-header'
});