Published on: 12 Jan, 2016

Back to top link jquery plugin

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=""></script>
<script src="jquery.backtotoplink.min.js"></script>

To run the script simple, run the following function.


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.


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.

	navigatorPosition: 'lb',
	navigatorBorderRadius: '100%'

The following example will use an external image source.

	arrowImgSrc: '/images/arrowtop.png',
	arrowImgMarginTop: 5


This JQuery plugin is licensed under MIT.



Download from Github


Sagar Thakur
16 Jan, 2016
Nice. It would be great if you could register this plugin on jspm. Then it would be even more easy to use.
29 Nov, 2016
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.
29 Nov, 2016
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.
29 Nov, 2016
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.
30 Nov, 2016
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?
03 Jan, 2018
It's doing some weird spazzing out when finishing the animation and fading out on ios ? Anyone know why ? I'm thinking it could be the z-index but tried different values.
20 Jan, 2018
Hi Caim, do you have a link that I can have a look? How did it do in safari web? I didn't have an iPhone, so I might use a ios simulation on the web.
22 Sep, 2018
Nice script! it works perfectly. but I have an issue. I put my own image using : $.backToTopLink({ arrowImgSrc: '/images/arrowtop.png', arrowImgMarginTop: 5 }); and it shows the image but over the default arrow ;( how can I do to display ONLY the image? Thanks
22 Sep, 2018
Hi Fabian, Do you have the url site I can view this? The default arrow is actually built using CSS3 using CSS3. If the settings arrowImgSrc has been specified or not empty, it should use the image instead.
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.