It's simple.
Connect this plugin to your page:
<script src="/path/to/anchorSpy.js"></script>
And initialize plugin giving a menu selector to it.
var Spy = $('.menu').anchorSpy({
margin: 50,
speed: 1000,
next: '.next',
prev: '.prev',
active_class: 'active',
active_parent: true
});
HTML documet looks like:
<ul class="menu"> <li><a href="#menu">menu</a></li> <li><a href="#faq">faq</a></li> <li><a href="#list">list</a></li> </ul> <div> <a name="menu"></a> Lorem ipsum dolor ... </div>
This plugin has some options.
| option | default | needs |
|---|---|---|
| margin | 50 | Integer |
| speed | 1000 | Integer |
| next | false | DOM selector |
| prev | false | DOM selector |
| active_class | 'active' | string active class name |
| active_parent | true | boolean, determines to which element active class has to be added |
If You need reload menu use:
Spy.reload();
If you need to go to the next or previous block then use:
Spy.next();
Spy.prev();