Floating Back to Top Arrow
DEMO: Scroll down the page to see the floating 'Back to Top' arrow in the bottom corner. Click the arrow to return to the top.
Floating 'Back to Top' or 'Scroll to Top' arrows are common on many websites and blogs. The idea is that if you have a long website page you might want to give users an easy way to scroll back to the top of the page.
Go to Float Panel to download the demo (demo 3) and source code
- Plain JavaScript(4KB). jQuery is not required.
- Cross platform and browser support
- Completely FREE to use.
Usage
1. Add script links
It is using the same script of the Float Panel:
<!-- add the link into the head section of the page -->
<script src="float-panel.js"></script>
2. Add Arrow
<!--Add it anywhere on the page -->
<div id="backtop">▲</div>
data-v-w="scrollY [, min-width]": You can optionally add this attribute. For example:<div id="backtop" data-v-w="300, 1200">▲</div>
Then the floating arrow won't appear unless:
- The page is scrolled more than 300px;
- And browser width is larger than 1200px.
- The second parameter, 1200px, is optional. It is useful when you do not like the arrow overlays the page content (assuming your page is 1100px wide). If data-v-w="300", the appearance of the arrow will not take the page width into account.
- If data-v-w attribute is not added, the arrow will appear when the page is scrolled more than 200px.
3. Styles
You can style the floating arrow to anything you like: arrows, buttons, links, etc. For details please refer to the #backtop style codes in the demo3-backToTop.html (available in the download package).
That's it. It's done!