vanilla-back-to-top
Advanced tools
Comparing version 1.0.0 to 1.0.1
{ | ||
"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", |
# 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 |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
5403
61
0
4
76