https://github.com/tanrax/simplescrollup

Simple plugin in Javascript to animate scrolling when you return to the top of the page
https://github.com/tanrax/simplescrollup

animated javascript plugin scrolling scrollup vanilla

Last synced: about 2 months ago
JSON representation

Simple plugin in Javascript to animate scrolling when you return to the top of the page

• Host: GitHub
• URL: https://github.com/tanrax/simplescrollup
• Owner: tanrax
• Created: 2017-11-01T10:04:53.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-02-02T15:46:52.000Z (almost 6 years ago)
• Last Synced: 2024-08-08T19:14:54.474Z (5 months ago)
• Topics: animated, javascript, plugin, scrolling, scrollup, vanilla
• Language: JavaScript
• Homepage: http://simplescrollup.programadorwebvalencia.com/
• Size: 844 KB
• Stars: 9
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Simple plugin in Javascript Vanilla to animate scrolling when you return to the top of the page

## Demo

[Project Site](http://simplescrollup.programadorwebvalencia.com/)

## Download

```bash

npm install simplescrollup

```

or

```bash

yarn add simplescrollup

```

## Quick start

1. Download **simplescrollup.js** .

2. Link in your HTML **simplescrollup.js** .

```html

	

```

Example

```html

	

	

	

		

		

	

```

3. Add your button with this structure.

```html

Your text

```

Example

```html

	

	

	

		

		Your text

		

	

```

4. Add CSS.

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

	

		

			.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);

			}

		

	

	

		

		Your text

		

	

```

5. Enjoy!!

## Advance

You can control the duration and type of animation.

```html

Your text

```

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