1.1.1 • Published 2 years ago
simplescrollup v1.1.1
Simple plugin in Javascript Vanilla to animate scrolling when you return to the top of the page
Demo
Download
npm install simplescrollup
or
yarn add simplescrollup
Quick start
- Download simplescrollup.js .
- Link in your HTML simplescrollup.js .
<script src="simplescrollup.js"></script>
Example
<html>
<head>
</head>
<body>
<!-- Your HTML content -->
<script src="simplescrollup.js"></script>
</body>
</html>
- Add your button with this structure.
<a href="#up" class="simplescrollup__button simplescrollup__button--hide">Your text</a>
Example
<html>
<head>
</head>
<body>
<!-- Your HTML content -->
<a href="#up" class="simplescrollup__button simplescrollup__button--hide">Your text</a>
<script src="simplescrollup.js"></script>
</body>
</html>
- Add CSS.
.simplescrollup__button {
position: fixed;
bottom: 3rem;
right: 3rem;
transition: 1s all;
z-index: 10000;
}
.simplescrollup__button--show {
transform: translateX(0);
}
.simplescrollup__button--hide {
transform: translateX(100px);
}
Example
<html>
<head>
<style>
.simplescrollup__button {
position: fixed;
bottom: 3rem;
right: 3rem;
transition: 1s all;
z-index: 10000;
}
.simplescrollup__button--show {
transform: translateX(0);
}
.simplescrollup__button--hide {
transform: translateX(100px);
}
</style>
</head>
<body>
<!-- Your HTML content -->
<a href="#up" class="simplescrollup__button simplescrollup__button--hide">Your text</a>
<script src="simplescrollup.js"></script>
</body>
</html>
- Enjoy!!
Advance
You can control the duration and type of animation.
<a href="#up" duraction="1000" height-hide="100" easing="easeInOutQuad" class="simplescrollup__button simplescrollup__button--hide">Your text</a>
- duration: Time in milliseconds that it will take to go up above the page.
- height-hide: Distance in pixels from top at which button will be displayed.
- easing: You can change the animation scroll for any of this list. linear easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint * easeInOutQuint