Show back to top button on scroll jQuery
jQuery Plugins jQuery Other Plugins jQuery gotop Auto Show / Hide Scroll To Top Button with jQuery - gotop
Demo Download How to start using jQuery? More in this category... View our Recommended Plugins TOP 100 jQuery Plugins 2021 Chrome, IE8+, FireFox, Opera, Safari#Back to top#scroll to top Yet another jQuery plugin to create a customizable scroll to top arrow (button) for scrolling the web page to the top. The plugin reveals the scroll to top arrow when scrolling down, and fades it out when scrolling up. How to use it:1. Import jQuery library and the jQuery gotop plugin into your long web page. 2. Load the Font Awesome Iconic Font for the scroll to top icon. 3. Create a container for the scroll to top button at the bottom of your web page. 4. Initialize the plugin to generate a default scroll to top arrow that stays in bottom right corner of a browser when you scroll down the page. By default, the plugin usesGlyphicon for arrow icon. $('#goTop').goTop();5. Customize the plugin by passing the option objects during initialization. $('#goTop').goTop({ // container element to place the scroll to top button container: '', // The amount of pixels the page must be scrolled down before the arrow is displayed. appear: 200, // how long the animation will run when scrolling to the top of the page. scrolltime: 800, // The CSS classes used to display the arrow. src: "fas fa-chevron-up", // The width of the arrow. width: 45, // The location where the arrow will be shown. // "right" or "left" place: "right", // how long the animation will run when fading in to opaque. fadein: 500, // how long the animation will run when fading out to transparent. fadeout: 500, // Sets the transparency level for the arrow, // where 1 is not transparent at all, // 0.5 is 50% see-through and // 0 is completely transparent. opacity: 0.5, // The percentage amount indicating how far away the arrow is from the bottom, left, or right, // depending on the value of place. marginX: 2, // The percentage amount indicating how far away the arrow is from the top or bottom, // depending on the value of place. marginY: 2, // The CSS z-index property zIndex: 9 });Changelog:2019-06-25
This awesome jQuery plugin is developed by scottdorman. For more Advanced Usages, please check the demo page or visit the official website.
|