@yishiashia/scroll-to-element
TypeScript icon, indicating that this package has built-in type declarations

2.0.2 • Public • Published

scroll-to-element

An alternative scroll library to scrollIntoView.

npm npm jsDelivr GitHub issues license

NPM

Installation

You can install scroll-to-element with npm, or just get started quickly with CDN.

Install from npm

$ npm install @yishiashia/scroll-to-element

After the package is installed, then you can import the module into you code:

Syntax

scrollToElement(element, [options])

For example:

scrollToElement(document.getElementById("scroll-target"));
scrollToElement(document.getElementById("scroll-target"), {
  duration: 300
});
scrollToElement(document.getElementById("scroll-target"), {
  duration: 300, easeFunc: "linear"
});

Install from CDN

There is jsDelivr CDN available for quickly integrated with your web page.

https://cdn.jsdelivr.net/npm/@yishiashia/scroll-to-element@2.0.2

or

<script src="https://cdn.jsdelivr.net/npm/@yishiashia/scroll-to-element@2.0.2"></script>

Basic Usages

Here's a example that directly include the library into html page. For further customization details, see options.

<html lang="en">
<head>
  <title>scroll-to-element demo</title>

  <!-- Load scrollToElement library -->
  <script src="https://cdn.jsdelivr.net/npm/@yishiashia/scroll-to-element@2.0.2"></script>
  <!-- End Load -->

  <script>
    function doScroll() {
      /**
       * Use window.scrollToElement function to
       * scroll to the target element
       */
      window.scrollToElement(
        document.getElementById('scroll-target'),
        {
          duration: 300,
          easeFunc: "linear"
        }
      );
    }
  </script>

  <style>
    body {
      min-height: 200vh;
    }
    div.content-block {
      height: 100px;
      width: 90%;
      margin: 20px auto;
      border: solid 1px black;
    }
    button {
      margin: 0 auto;
      display: block;
    }
  </style>

</head>
<body>

  <div class="content-block"></div>
  <div class="content-block"></div>
  <div id="scroll-target" class="content-block">
    <strong>I am scroll target.</strong>
  </div>

  <br /><br />

  <button onclick="doScroll();">Scroll Me</button>
</body>
</html>

Anthor way to use this library just import the library and use scrollToElement function.

import scrollToElement from '@yishiashia/scroll-to-element'

function App () {
  scrollToElement(
    document.getElementById("scroll-target"),
    {
      duration: 300,
      easeFunc: "linear"
    }
  );
}

Options

duration (optional)

The scroll animation transition duration in milliseconds. Default: 600.

easeFunc (optional)

Easing function of animation, can be linear, easeOutCubic or easeOutQuint. Defaults to linear.

Readme

Keywords

Package Sidebar

Install

npm i @yishiashia/scroll-to-element

Weekly Downloads

1

Version

2.0.2

License

MIT

Unpacked Size

18 kB

Total Files

6

Last publish

Collaborators

  • yishiashia