Press "Enter" to skip to content

Add Smooth Links and Scroll Buttons to Anchor Links | jQuery Anchor Scroll

jQuery Anchor Scroll, An alternative to CSS property that applies a smooth scrolling effect with configurable fast, loosening, and offset for anchor links within the document.

How to make use of it:

1. Insert the JavaScript jquery-anchorScroll.js after loading the most recent jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/jquery-anchorScroll.js"></script>

2. Call the function on the target container during which you need to allow the graceful scroll impact and accomplished.

<nav class="nav">
  <ul>
    <li>
      <a href="#section01">Top</a>
    </li>
    <li>
      <a href="#section02">How to use [Basic]</a>
    </li>
    <li>
      <a href="#section03">Settings for each section</a>
    </li>
    <li>
      <a href="#section04">Event</a>
    </li>
  </ul>
</nav>
var anchorScroll = $(document).AnchorScroll({
    // options here
});

3. Determine the anchor links that must be affected by the plugin. Defaults to all anchor links discovered throughout the doc.

var anchorScroll = $(document).AnchorScroll({
    target: 'a[href^="#"]'
});

4. Customize the animation speed.

var anchorScroll = $(document).AnchorScroll({
    speed: 1000
});

5. Specify the offset in px.

var anchorScroll = $(document).AnchorScroll({
    offset: 20
});

6. Apply an easing function to the graceful scroll impact. You would possibly want a third easing library for extra easing features.

var anchorScroll = $(document).AnchorScroll({
    easing: "linear"
});

7. Determine whether or not to heart the sectioned content after scrolled.

var anchorScroll = $(document).AnchorScroll({
    center: 1
});

8. You’re additionally allowed to go choices through data attributes as follows:

<section id="section03" 
         data-speed="300" 
         data-easing="300" 
         data-offset="-60" 
         data-center="1">
         Section 3
</section>

9. Available events that can be fired earlier than or after scroll.

anchorScroll.on('scrollStart', function (event) {
  var target = event.target,
  settings = event.settings;
  console.log('Start');
  if( $(window).width() < 768 ) {
    settings.center = 0;
  }
});

anchorScroll.on('scrollEnd', function (event) {
  var target = event.target;
});

Custom Smooth Scroll For Anchor Links, jQuery Anchor Scroll Plugin/Github

jQuery-Anchor-Scroll-Demo


See Demo And Download

Official Website(Vicugn4Pac0s): Click Here

This superior jQuery/javascript plugin is developed by Vicugn4Pac0s. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *