0.0.7 • Published 7 years ago
roll-to v0.0.7
roll-to.js
An tiny scroll library, inspired by sweet-scroll, sweet scroll is awesome.
Example
- Example This example have adapt for mobile view, you can try it on chrome devtool and switch to mobile dev model
- Codepen
Install
npm install roll-toAPI
RollTo(option)
option
- animate: {String} transition animation, you can select of Animate
- duration: {Number} transition duration, use millisecond as unit
return {Object} an instance to do scroll operation
rollTo.top()
scroll to top of window
rollTo.bottom()
scroll to bottom of window
rollTo.section(element)
element: the element you want to scroll to top
Animate
- linear
- easeOut
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
Usage
<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>