Remember The Reading Position On Window Resize - AnchorPointJS

Remember The Reading Position On Window Resize - AnchorPointJS
File Size: 16.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

AnchorPointJS is a jQuery plugin for better reading experience that remembers the user's current reading position when the window resizes.

The plugin automatically adds an anchor link to an element within the current reading position and automatically scrolls the page to the anchor on window resized.

How to use it:

1. Add references to jQuery library and the jQuery AnchorPointJS.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
        crossorigin="anonymous"></script>
<script src="AnchorPoint.js"></script>

2. Call the function on a container or the whole body and done.

$(function(){

  $(".container").AnchorPoint();

  // or

  $("body").AnchorPoint();

});

3. Specify the time to wait before the plugin searches the next anchor link.

$(function(){

  $(".container").AnchorPoint({
    anchorTimeout: 500
  });

});

4. Specify the scroll depth the plugin begins looking for an anchor.

$(function(){

  $(".container").AnchorPoint({
    depth: .2 // 0~1
  });

});

5. Enable/disable the debug true. When true, the plugin will generate a horizontal anchor line on the webpage.

$(function(){

  $(".container").AnchorPoint({
    debug: false
  });

});

6. The plugin will add the 'data-AnchorPoint-anchor' attribute to the active anchor link. So that you can style the anchor link in the CSS.

[data-AnchorPoint-anchor] {
  background: cyan;
}

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