Dead Simple Floating Action Button Plugin - jQuery Docked Link

File Size: 37.1 KB
Views Total: 1876
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Dead Simple Floating Action Button Plugin - jQuery Docked Link

Docked Link is a really simple jQuery plugin used to create a floating link that will always stay at the center-left or center-right as you scroll down or up the web page. Ideal for sticky action buttons such as social sharing, email subscription, etc.

How to use it:

1. Include the JavaScript file docked-link.js after the latest jQuery library.

<script src="//"></script>
<script src="docked-link.js"></script>

2. Create the docked link as this. Best practice: place below the fold to avoid visible DOM manipulation.

<a id="myLink" href="">Link To jQueryScript</a>

3. Apply your own CSS styles to the docked link.

#myLink {
  display: block;
  width: 120px;
  padding: 8px 8px 8px 14px;
  background :#2980B9;
  color: #fff;
  text-decoration: none;
  text-align: center;
  line-height: 20px;
  border-top-right-radius: 11px;
  border-bottom-right-radius: 11px;

4. Activate the docked link with default settings.


5. Set the initial position from the top of the webpage.

  pixelsFromTop: 1000

6. Change the default position of the docked link.

  position: 'right' // or 'left'



  • If the element is invisible, keep it invisible.

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