Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A jQuery plugin that modifies a navigation menu to highlight / change when the menu's target smooth scrolls into view
branch: master

README.markdown

Features

  • Smooth scrolling page navigation.
  • Easing can easily be defined for both horizontal and vertical scrolling.
  • Auto-updating menu which highlights both the currently viewed content & other content in view.
  • User can cancel auto-scroll by pressing any key, clicking on the page or scrolling the mousewheel.
  • Can be set up to work with any menu elements. Integrates easily with Bootstrap!
  • Location hash updates as you scroll through the page (v2.4.2).

Demos

Documentation

  • Moved to the Wiki pages.
  • For more details, see my blog entry or check out any of the demo pages source.

Dependencies

  • jQuery 1.3+ (required)
  • jQuery easing plugin (optional); jQuery 1.4 required for special easing.

Licensing

  • MIT License for all versions.
  • Previously it was dual licensed under MIT and GPL, but now it's just the MIT.

Known Problems & Bugs

  • Doesn't work well in IE7 or IE quirks mode. Probably not in IE6.
  • The menu will not select (or highlight) the item above the last item if they are both very short. For example, if your browser shows three sections while at the bottom of the page. The third to last may have shown for a brief time just before the bottom of the page reached the bottom edge margin. The menu would then skip directly to the last menu item. This is one reason why the bottom margin value is kept a low number (100 pixels by default).
  • Fixed in v2.4.2! If you click on a menu item, the page contents will automatically scroll to that section and update the browser url with that target. But if you manually scroll the page using the scroll bar or mouse, the web page url will not update with the current position. This was done on purpose, because if the script changes the location, the page will jump to that target automatically. This wouldn't look good if you are quickly scrolling through the page as it would make the movement jittery.

Change Log

Version 2.4.2

  • Hash now updates while scrolling. Fixes issue #7.
  • Merged in a fix (pull #9) for a selector that was not properly scoped. Thanks jewlofthelotus!

Version 2.4.1

  • Merged in optimization by annavester. Thanks for contributing!
  • Added gitignore and gitattribute files.
  • Added manifest file for jQuery plugin registry site.

Version 2.4

  • Added stopOnInteraction option
    • When true any interaction the user performs during scrolling will stop the animation.
    • If this option is false, the animation can not be interrupted unless a stop() function is called on the document body - $('body').stop().
    • Interactions include pressing any key on the keyboard, clicking the mouse on the page or using the mousewheel.
    • In previous versions, this functionality was built in and always enabled this option was added to allow the plugin to work by stepping through the sections - see the new section stepper demo.
    • Default value is true.
  • Added an initialized callback function:

    • This callback is executed after the plugin has finished initialization.
    • Set up the option as follows:

      $("#menu").visualNav({
        initialized : function(vNav){
          // vNav = visualNav object (api)
        }
      });
  • Added a changed callback function:

    • This callback is executed every time the menu changes.
    • So going from the first to third menu item, the changed callback will fire off twice (2nd & 3rd menu item), then fire off the complete callback.
    • Set up the option as follows:

      $("#menu").visualNav({
        changed : function(vNav){
          // vNav = visualNav object (api)
        }
      });
  • Added currentContent option

    • Set this option with the css class name to style the current content.
    • In the section stepper demo, you can see that it changes the background color of the current section.
    • This class name is added to the content when the menu updates.
    • A jQuery object of the current content can be accessed through the api as vNav.$curContent.
    • The default value is 'current'.
  • Added an update method

    • If the visualNav plugin needs to be updated with any changes to the menu or content, this API method can be used.
    • Either method below will update the menu

      // update visualNav, any variables will be ignored
      $('#menu').visualNav();
      
      // or use the api to update the plugin
      var vNav = $('#menu').data('visualNav');
      vNav.update();
  • Updated the contentLinks and externalLinks options:

    • These options contain the class name that could only be applied to a link <a> to work properly
    • Now any element with either of these class names can contain links
Something went wrong with that request. Please try again.