In-Page Navigation
These modular elements can be readily used and customized across pages and in different blocks.
Explore all of Stack's modular elements
at the Element Index Page →
In-Page Links
Stack includes a smooth scrolling plugin which allows you to animate the page's scrolling to elements within the page.
The smooth scrolling function requires two elements: the <a href>element with class .inner-linkand an element to be scrolled to - which requires an idattribute that matches the href value of the link.
The markup snippet below demonstrates:
<a class="inner-link" href="#my-section">My Section</a>...<section id="my-section">...</section>
The above link will scroll to this section.
In-Page Navigator
The In-Page Navigator is a unique navigation method running down the side of the page that helps to orient the user. This feature is particularly useful for 'one-page' sites or small, photography focussed landing pages.
The In-Page Navigator works on the smooth scrolling principles described above and is housed inside a <section class="page-navigator">. This section has a child <ul>element with a child <li>element for each section on the page.
The markup snippet below demonstrates:
<section class="page-navigator"> <ul> <li> <a href="#section1" class="inner-link" data-title="Section 1"></a> </li> <li> <a href="#section2" class="inner-link" data-title="Section 2"></a> </li> <li> <a href="#section3" class="inner-link" data-title="Section 3"></a> </li> </ul></section>