roll-to
scroll library
Last updated 3 years ago by jkvim .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install roll-to 
SYNC missed versions from official npm registry.

roll-to.js

An tiny scroll library, inspired by sweet-scroll, sweet scroll is awesome.

Build Status NPM version Downloads

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-to

API

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>

Current Tags

  • 0.0.7                                ...           latest (3 years ago)

7 Versions

  • 0.0.7                                ...           3 years ago
  • 0.0.6                                ...           3 years ago
  • 0.0.5                                ...           3 years ago
  • 0.0.4                                ...           3 years ago
  • 0.0.3                                ...           3 years ago
  • 0.0.2                                ...           3 years ago
  • 0.0.1                                ...           3 years ago
Maintainers (1)
Downloads
Today 1
This Week 1
This Month 4
Last Day 0
Last Week 2
Last Month 2
Dependencies (0)
None
Dev Dependencies (13)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |