@yishiashia/scroll-to-element
v2.0.2
Published
An alternative scroll library to scrollIntoView
Downloads
8
Readme
scroll-to-element
An alternative scroll library to scrollIntoView.
Installation
You can install scroll-to-element with npm, or just get started quickly with CDN.
Install from npm
$ npm install @yishiashia/scroll-to-elementAfter 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/[email protected]or
<script src="https://cdn.jsdelivr.net/npm/@yishiashia/[email protected]"></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/[email protected]"></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.