DOCSEARCHbyAlgolia
Submit Docs

jquery.localscroll

repository·master·Indexed 20 days ago

https://github.com/flesler/jquery.localscroll

A jQuery plugin for animated anchor navigation. It requires jQuery.scrollTo to function and supports global application via $.localScroll() or targeted application via $(selector).localScroll(). Features include event delegation via a lazy loading setting and an onBefore callback to intercept or cancel scroll animations.

Tokens
1.5K
Snippets
6
Records
8
Agent score
20%

What's inside jquery.localscroll

  2. Configure jQuery.localScroll settings

    master
    jQuery.localScroll passes its settings hash directly to jQuery.scrollTo. This means you can use any configuration options provided by jQuery.scrollTo in addition to the localScroll settings. Most default behaviors are inherited from jQuery.scrollTo.

  4. Use jQuery.localScroll via CDN

    master

    You can include the plugin directly in your HTML using the jsDelivr CDN. Note that the cdnjs version is listed as outdated.

    <!-- Using jsDelivr (Recommended) -->
<script src="//cdn.jsdelivr.net/npm/jquery.localscroll@2.0.0/jquery.localScroll.min.js"></script>

<!-- Using cdnjs (Outdated) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-localScroll/1.3.5/jquery.localScroll.min.js"></script>

  5. Apply jQuery.localScroll to all links globally

    master

    Instead of selecting specific elements with $(selector).localScroll(...), you can apply the plugin to all links on the page with the same settings by calling the plugin directly on the jQuery object: $.localScroll(...).

    // Apply to all links on the page with specific settings
$.localScroll({
  // your settings here
});

  6. Configure jQuery.localScroll settings

    master

    The localScroll plugin accepts a settings object to customize animation behavior and event handling. These settings are merged with $.localScroll.defaults.

    $.localScroll({
  duration: 1000,    // How long to animate (ms)
  axis: 'y',         // 'y' (vertical) or 'x' (horizontal)
  event: 'click',    // The event to react to (e.g., 'click', 'mouseenter')
  stop: true,        // If true, avoids queuing animations by stopping current ones
  target: window,    // The element to scroll (selector or element). Defaults to window.
  autoscroll: true,  // If true, applies scrolling on initial page load if a hash exists
  lazy: false,       // If true, uses event delegation (links added later will work)
  lock: false,       // If true, ignores events if the target is already animating
  filter: null,      // A selector to filter which anchors are matched
  hash: false,       // If true, the hash of the selected link will appear in the address bar
  onBefore: null     // Callback function called before scrolling. 
                     Signature: function(e, elem, $target)
                     Return `false` to cancel the scroll.
});

  7. Initialize jQuery.localScroll

    master

    To initialize the plugin, call $.localScroll(settings) to apply it to the body element, or call $(selector).localScroll(settings) to apply it to a specific container. This enables animated anchor navigation for links (<a> and <area> tags) within the selected scope.

    If lazy: true is set in the settings, the plugin uses event delegation, allowing you to add new links to the DOM after initialization and still have them work.

    // Apply to the whole body with custom settings
$.localScroll({
  duration: 800,
  event: 'click'
});

// Or apply to a specific container
$('#nav-container').localScroll({
  duration: 500
});

  8. Use the onBefore callback to intercept scrolling

    master

    The onBefore option allows you to execute logic before the scroll animation begins. If the callback returns false, the scrolling animation is cancelled.

    Arguments passed to the callback:

    1. e: The original event object.
    2. elem: The target DOM element being scrolled to.
    3. $target: The jQuery object of the element being scrolled (e.g., the window or a container).
    $.localScroll({
  onBefore: function(e, elem, $target) {
    // Example: prevent scrolling if a confirmation dialog is open
    if (isDialogOpen) {
      return false;
    }
    return true;
  }
});