Highly Customizable jQuery Back To Top Plugin - go2top
File Size: | 8.4 KB |
---|---|
Views Total: | 2913 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

go2top is a simple, lightweight jQuery plugin for creating a SVG based back to top button which allows the visitor to go back to the top of the webpage. The back to to button appears when scrolling down and auto hides it self when you reach the top of the webpage. You can customize the styles and behaviors directly in the JavaScript.
How to use it:
1. First you need to load jQuery library and the jQuery go2top plugin at the end of your html document.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.goup.min.js"></script>
2. And then initialize the plugin to generate a default back to top button on the webpage.
$(document).ready(function(){ $.goup(); });
3. Customize the back to to button with the following options.
$.goup({ // where to place the back to top button // "left" or "right" location: "right", // left/right offset in pixels locationOffset: 150, // bottom offset in pixels bottomOffset: 100, // width / height of the back to top button containerSize: 40, // radius of the back to top button containerRadius: 10, // CSS class for the back to top button containerClass: "goup-container", // always visible alwaysVisible: false, // trigger offset // after how many scrolled down pixels the button must be shown trigger: 250, // animation for the back to top button // "slide" or "fade" entryAnimation: "fade", // scroll speed // "slow", "normal" or "fast" goupSpeed: "slow", // the threshold of window width under which the button is permanently hidden hideUnderWidth: 500, second: 0.3, // background color bcolor: "#eee", // hover color acolor: "#bbb", // path to the back to top icon img: "arrow_up.svg" });
This awesome jQuery plugin is developed by jQueryScript. For more Advanced Usages, please check the demo page or visit the official website.