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="//code.jquery.com/jquery-3.2.1.slim.min.js"></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="https://www.jqueryscript.net">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.

$('#myLink').dockedLink();

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

$('#myLink').dockedLink({
  pixelsFromTop: 1000
});

6. Change the default position of the docked link.

$('#myLink').dockedLink({
  position: 'right' // or 'left'
});

Changelog:

2019-05-03

• 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.