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-link and an element to be scrolled to - which requires an id attribute 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>