Show back to top button on scroll jQuery

jQuery Plugins jQuery Other Plugins jQuery gotop

File Size:Views Total:Last Update:Publish Date:Official Website:License:

9.29 KB

9837

06/25/2019 00:41:00 UTC

06/05/2015 03:05:44 UTC

Go to website

MIT

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

• Use Font Awesome Iconic Font

This awesome jQuery plugin is developed by scottdorman. For more Advanced Usages, please check the demo page or visit the official website.

Video liên quan