Simplescrollup
Simple plugin in Javascript to animate scrolling when you return to the top of the page
Install / Use
/learn @tanrax/SimplescrollupREADME
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
