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">
            <a href="#section1" class="inner-link" data-title="Section 1"></a>
            <a href="#section2" class="inner-link" data-title="Section 2"></a>
            <a href="#section3" class="inner-link" data-title="Section 3"></a>
Section 1
Section 2
Section 3