vanilla-back-to-top - npm Package Compare versions

Comparing version 7.0.3 to 7.0.4

OPTIONS.md

package.json

		{
		"name": "vanilla-back-to-top",
		"version": "7.0.3",
		"version": "7.0.4",
		"description": "Tiny and configurable Back To Top button with no dependencies",
		@@ -5,0 +5,0 @@ "main": "dist/vanilla-back-to-top.umd.js",

116

README.md

		@@ -8,8 +8,4 @@ # Vanilla Back To Top

		Tiny but highly configurable Back To Top button with no dependencies that will work for [basically all users in the world](http://browserl.ist/?q=explorer+%3E%3D9%2Cexplorermobile+%3E%3D10%2Cedge+%3E%3D12%2Cfirefox+%3E%3D2%2Cfirefoxandroid+%3E%3D2%2Cchrome+%3E%3D4%2Csafari+%3E%3D5.1%2Copera+%3E%3D11.5%2Coperamobile+%3E%3D12%2Cchromeandroid+%3E%3D4%2Cios+%3E%3D7.1%2Cucandroid+%3E%3D11.4%2Candroid+%3E%3D3%2Csamsung+%3E%3D4%2Cblackberry+%3E%3D7)
		Tiny and smooth Back To Top button

		Works universally great with frameworks - [React](https://reactjs.org/), [Angular](https://angular.io/), [Vue](https://vuejs.org/) etc, and without them, e.g., on pre-rendered static websites like [Jekyll](https://jekyllrb.com), [Hugo](http://gohugo.io/) or [Hexo](https://hexo.io/)

		Scrolls smoothly using [requestAnimationFrame](https://github.com/vfeskov/vanilla-back-to-top/blob/master/index.js#L105)

		<img src="https://i.pi.gy/ee5b5.gif" width="320px"/>
		@@ -23,106 +19,14 @@

		### Global declaration

		This is the simplest way to use it, works great with classic non modular JavaScript.

		Add this to your HTML:
		Add this anywhere in your HTML:
		```html
		<script src="https://unpkg.com/vanilla-back-to-top@7.0.3/dist/vanilla-back-to-top.min.js"></script>
		<script>addBackToTop()</script>
		<script src="https://unpkg.com/vanilla-back-to-top@7.0.4/dist/vanilla-back-to-top.min.js"></script>
		<script>addBackToTop({
		size: 56,
		backgroundColor: 'rgb(255, 82, 82)',
		textColor: '#fff'
		})</script>
		```

		If you don't want to rely on [unpkg.com](https://unpkg.com/#/about), save [the file](https://unpkg.com/vanilla-back-to-top@7.0.3/dist/vanilla-back-to-top.min.js) to your project and serve it from your server:
		```html
		<script src="/assets/vanilla-back-to-top.min.js"></script>
		<script>addBackToTop()</script>
		```
		## [Other options](https://github.com/vfeskov/vanilla-back-to-top/blob/master/OPTIONS.md)

		### Isolated UMD module

		This is how you would use it with a modular app, e.g., with [React](https://reactjs.org/), [Angular](https://angular.io/), [Vue](https://vuejs.org/) etc

		Install the package with npm:
		```bash
		npm install --save vanilla-back-to-top
		```
		Import it as ES6, Node.js or RequireJS module, for example:
		```js
		import { addBackToTop } from 'vanilla-back-to-top'
		addBackToTop()
		// your Vue/React/Angular/etc bootstrapping code here
		```

		## Styling

		You can change the looks of the button using `#back-to-top` selector in your CSS:
		```css
		#back-to-top {
		background-image: url(back-to-top.png)
		}
		@media screen and (max-width: 479px) {
		#back-to-top {
		right: 10px;
		bottom: 10px;
		}
		}
		```

		## Examples of some options

		In addition to styling with CSS, you can call `addBackToTop` function with many [options](#options), these are some examples:

		- Change colors: <img src="https://i.pi.gy/j3GO0.png" width="68" />
		```js
		addBackToTop({
		backgroundColor: 'pink',
		textColor: '#ad19b7'
		})
		```

		- Change size: <img src="https://i.pi.gy/30OGz.png" width="50" />
		```js
		addBackToTop({
		size: 40
		})
		```

		- Use [another SVG icon](https://material.io/icons/#ic_arrow_upward): <img src="https://i.pi.gy/YnL8p.png" width="65" />
		```js
		addBackToTop({
		innerHTML: '<svg viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z"/><path fill="#fff" d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>'
		});
		```

		## <a id="options"></a>All options

		These are all the options you can possibly provide to `addBackToTop` function:
		```js
		// the values are also the default ones, so the call is equivalent to addBackToTop()
		addBackToTop({
		id: 'back-to-top',
		showWhenScrollTopIs: 1, // px
		onClickScrollTo: 0, // px
		scrollDuration: 100, // ms
		innerHTML = '<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>', // https://material.io/icons/#ic_keyboard_arrow_up
		size: 56, // px
		cornerOffset: 20, // px
		backgroundColor: '#000',
		textColor: '#fff',
		zIndex: 1
		})
		```

		\|Option\|Description\|
		\|-\|-\|
		\|`id`\|id attribute of the button\|
		\|`showWhenScrollTopIs`\|Show the button when page got scrolled by this number of pixels\|
		\|`onClickScrollTo`\|Where to scroll to, in pixels, when the button gets clicked, `0` means the very top\|
		\|`scrollDuration`\|How long, in milliseconds, scrolling to top should take. Set to `0` to make scrolling instant\|
		\|`innerHTML`\|HTML code to put inside the button\|
		\|`size`\|Width and height of the button in pixels\|
		\|`cornerOffset`\|Right and bottom offset of the button relative to viewport\|
		\|`backgroundColor`\|Background color of the button\|
		\|`textColor`\|Text color of the button\|
		\|`zIndex`\|z-index of the button\|

		### [★ Star me on GitHub](https://github.com/vfeskov/vanilla-back-to-top)
		[★ Star me on GitHub](https://github.com/vfeskov/vanilla-back-to-top)

vanilla-back-to-top - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics