Inpage.js is a jQuery powered tool for dynamically generating links to key content in the current webpage being viewed, and for enabling the visitor to smoothly scroll to those elements when the Inpage link is clicked.
- jQuery
- A basic knowledge of HTML
- An HTML 5 page
So far Inpage.js has been tested and works great on IE 7/8/9/10/11, Chrome, and Safari.
Very simply. First just include the script file as shown:
<script src="/js/inpage.js"></script>
Then create the wrappers for your menu as shown below. You can place them anywhere on your page and can style them however you want with CSS (horizontal, vertical, etc.). Just don't change the ID's of the elements shown below
<div id='submenu_wrapper'>
<nav id="submenu">
<ul id="submenulist" ></ul>
</nav>
</div>
You may have observed that the "submenulist" UL element is empty. It will be filled automatically by inpage.js when the page loads with links to any elements on the page with a "data-inpage" attribute. Here's an example of a heading that has the tag:
<h1 data-inpage="FAQ">Frequently asked questions</h1>
In our example the inpage.js generated menu would display a link with the text "FAQ" which would, when clicked, initiate a smooth scroll down to the chosen element
And it's that easy.