CodeCanyon

Anchor Page

Anchor Page

AnchorPage is a light multi-purpose jquery plugin for creating navigation menus with anchor links to sections of your page, as fast as possible. It’s device friendly by supporting all kinds of screens and media devices. Has a awesome light-coded interface which provides a great performance for your page. It also supports the third party jquery easing plugin, so you can use different effects in your page’s transitions. It has some callback functions as well so you can better control it. Another two great features are the hash deep linking and the roll spy.

Available Options:

  • Offset
  • Scrolling speed
  • RollSpy
  • Hash navigation
  • Easing effects
  • Callbacks
    • beforeAnchorLoad
    • afterAnchorLoad

External Script(optional):

jquery.easing.1.3.js

How to Implement:

To get started you need to copy the necessary resource files to your assets folder and include them to your pages. You can use the following example, you need to insert these lines in the section of your site.

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.anchorpage.js"></script>

<!--OPTIONAL-->
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

A example of the navigation menu you can use with the AnchorPage plugin.

<ul class="nav navbar-nav">
    <li class="active"><a href="home" data-anchor="home">Home</a></li>
    <li><a href="about" data-anchor="about">About</a></li>
    <li><a href="services" data-anchor="services">Services</a></li>
    <li><a href="contact" data-anchor="contact">Contact</a></li>
</ul>

Now activate the transition by calling the plugin to your navigation menu’s container.

<script>
    jQuery(function($){
        $(".navbar-nav").anchorpage();
    });
</script>

Update:

Version 1.0.1
  • Set different animations for each element.
by
by
by
by
by
by