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

vanilla-back-to-top

Package Overview

Dependencies

Maintainers

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.0 to 1.0.1

package.json

		{
		"name": "vanilla-back-to-top",
		"version": "1.0.0",
		"version": "1.0.1",
		"description": "Configurable zero dependency Back To Top button",
		"main": "index.js",
		"repository": {
		"type": "git",
		"url": "https://github.com/vfeskov/vanilla-back-to-top.git"
		},
		"scripts": {
		@@ -7,0 +11,0 @@ "precommit": "npm run build && git add ./dist/index.js",

README.md

		# Vanilla Back To Top

		Configurable zero dependency Back To Top button.

		Ideal for pre-rendered blogs with no frameworks, e.g., [Hexo](https://hexo.io/).

		<img src="http://i.pi.gy/DoaQa.gif" width="300px"/>

		## How to use

		Add this to your HTML:
		```
		<script src="https://unpkg.com/vanilla-back-to-top/dist/index.js"></script>
		<script>addBackToTop({})</script>
		```


		Optionally customise CSS of the button using `#back-to-top` selector, e.g.:
		```
		#back-to-top a {
		text-indent: -9999px;
		background-image: url(back-to-top.png)
		}
		@media screen and (max-width: 479px) {
		#back-to-top {
		right: 10px;
		bottom: 10px;
		}
		}
		```

		## Options

		`addBackToTop` function accepts many options, e.g.:
		```
		addBackToTop({
		id: 'back-to-top',
		showWhenScrollTopIs: 300,
		innerElement: document.createTextNode('Up'),
		size: 50,
		fontSize: 14,
		cornerOffset: 20,
		backgroundColor: '#000',
		textColor: '#fff',
		zIndex: 1,
		scrollContainer: document.documentElement
		})
		```
		^ All these are also default values.

		- `id` - id attribute of the button
		- `showWhenScrollTopIs` - show the button when page got scrolled by this number of pixels
		- `innerElement` - DOM element to put inside the button; with jQuery you can put something like this: `$('<svg>...</svg>').get(0)`
		- `size` - width and height of the button in pixels
		- `fontSize` - font size of the text inside the button
		- `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
		- `scrollContainer` - if only part of your website gets scrolled, e.g., when your sidebar never scrolls with content, put the scrolled DOM element here

build.js

Fixed alerts

Improved metrics

Worsened metrics