Published on: 12 January, 2016

Back to top link jquery plugin

Posted by andy | 1447 views 3 likes 3 favourites 5 comments
Tumblr Digg Google Plus

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.

Downloads

Download

Download from Github

Comments
Sagar Thakur
Commented on: 16 Jan, 2016 08:16:43 AM
Nice. It would be great if you could register this plugin on jspm. Then it would be even more easy to use.
Jim
Commented on: 29 Nov, 2016 01:23:18 PM
I'd really like to add it to a WordPress page but I get the error: page-name:716 Uncaught TypeError: Cannot read property 'backToTopLink' of undefined(…) How can I fix this? I'm and want to use WordPress default jQuery.
andy
Commented on: 29 Nov, 2016 01:25:12 PM
Hi Jim, Have you include the following script in your wordpress skin or themes? <script src="jquery.backtotoplink.min.js"></script> Make sure the path above is correct. I am not familiar with wordpress, but you should be able to include the script if needed as you said jquery has already been included.
Jim
Commented on: 30 Nov, 2016 10:21:20 AM
Hi Andy, I included the code "the WordPress" way like this
// Register Script function scroll_to_top() { wp_enqueue_script( 'scrolltotop', get_template_directory_uri() . '/js/jquery.backtotoplink.js', array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'scroll_to_top' );
When I click on the query.backtotoplink.js url I get the code so the link is good. I wrote more about it on github. The thing is, when I use the default WordPress jQuery it doesn't work, but when I use let's say a Google one then it works.
andy
Commented on: 06 Feb, 2017 01:18:45 PM
It could be the version is different. Do you know what version the wordpress currently have? Is there a way to upgrade the wordpress jquery? What is the url for the site?
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.