An tiny scroll library, inspired by sweet-scroll, sweet scroll is awesome.
- Example This example have adapt for mobile view, you can try it on chrome devtool and switch to mobile dev model
- Codepen
npm install roll-to
- animate: {String} transition animation, you can select of Animate
- duration: {Number} transition duration, use millisecond as unit
scroll to top of window
scroll to bottom of window
element: the element you want to scroll to top
- linear
- easeOut
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
<body>
<header>
<ul>
<li><a class="nav-one" href="#one">One</a></li>
<li><a class="nav-two" href="#two">Two</a></li>
<li><a class="nav-three" href="#three">Three</a></li>
<li><a class="nav-four" href="#four">Four</a></li>
</ul>
</header>
<main>
<section class="item-one"></section>
<section class="item-two"></section>
<section class="item-three"></section>
<section class="item-four"></section>
</main>
<script>
const rollTo = new RollTo();
var buttons = document.querySelectorAll('li');
var sections = document.querySelectorAll('section');
for (let i = 0; i < buttons.length; ++i) {
buttons[i].onclick = function(event) {
var className = event.target.className;
var index = className.slice(4);
for (let j = 0; j < sections.length; j++) {
if (sections[j].className.indexOf(index) > 0) {
rollTo.section(sections[j]);
break;
}
}
}
}
</script>
</body>