After creating back to top link article, I decided to create a simple JQuery plugin to help web masters and web designers to achieve this goal easily. The idea is to minimize their work by not modifying the content too much on their site. They can just simply copy the plugin link and run the required script with optional parameters.
Demo of the back to top link (version 1.0.0)
Simply scroll down this page content and you will see a button appears located on the bottom right side.
How does Back to Top Link work?
Pretty simple, what you need to do is to place the backtotoplink.js file into your site content. Remember because this script requires JQuery framework library, it needs to be placed after JQuery file. Please make sure the path of the link is correctly placed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="jquery.backtotoplink.min.js"></script>
To run the script simple, run the following function.
$.backToTopLink();
Option Parameters
You have the following option parameters to play with. Please see the available options below.
| Option Name | Default value | Description |
| navigatorZIndex | 999999 |
This represent the position z-index of the navigator link itself. By default html tag object will have z-index 0 value on it. You can read more information of it in our CSS z-index tutorial. |
| navigatorBorderRadius | 20% |
The border radius of the navigator link. By default it is set 20% which will form a square rounded border radius on the navigator link. You can read more information about border radius on our CSS3 border-radius tutorial. |
| navigatorBgcolor | #000 |
The background color of the navigator link. You can read more information about how the background color work on our CSS background tutorial. |
| navigatorBgcolorHover | #000 |
This will be the hover background color. By default it is set to the same color of the navigator background color. Hover in this case means you mouse over the top of the link. |
| navigatorOpacity | #000 |
This will be the hover background color. By default it is set to the same color of the navigator background color. Hover in this case means you mouse over the top of the link. |
| navigatorWidth | 30 |
The width of the navigator link. |
| navigatorHeight | 30 |
The height of the navigator link. |
| navigatorPadding | 30 |
The padding of the navigator link. |
| navigatorPosition | rb |
The position of the navigator link. rb represents right bottom while lb represents left bottom. |
| navigatorPosPercent | 3 |
The position percentage for navigator position. If you set to 5 and navigatorPosition is rb. It means it will set right:5% and bottom:5% for the navigator link. |
| arrowImgSrc |
By default the source of image is empty as it is using div and css to create the arrow top. |
|
| arrowColor | #fff |
The color of the arrow only applies for non image arrow (div arrow only). |
| arrowWidth | 10 |
The width of the arrow div. |
| arrowMarginTop | 10 |
The margin top of the arrow div. |
| arrowImgMarginTop | 10 |
The margin top of the arrow image. |
| scrollDelay | 10000 |
The scrolling delay of back to top page. |
The following example will create a rounded link navigator and will position it on the left bottom rather than right bottom.
$.backToTopLink({
navigatorPosition: 'lb',
navigatorBorderRadius: '100%'
});
The following example will use an external image source.
$.backToTopLink({
arrowImgSrc: '/images/arrowtop.png',
arrowImgMarginTop: 5
});
</pre>
License
This JQuery plugin is licensed under MIT.
