Contents

  1. Introduction
    1. Problem
    2. Related work
  2. Proposal
  3. Examples
    1. Tabs
    2. Table of contents
    3. Page markers

Introduction

This is an example of how you can style and wrap regular anchor links with the href attribute to create navigation points which track progress and take you to various points in the document.

Problem

It is often desirable to provide an indication of where the user is in a long scrolling document. This can help the user navigate the table of contents giving context.

See the examples section for some example of how these may be used.

Related work

TODO: Add related content.

Proposal

For a given scrolling box, one marker is determined to be the active marker.

When asked to run the scroll steps the active marker should be updated according to the eventual scroll location that the scroller will reach based on the current scrolling operation.

Examples

This pattern shows up in many real world use cases.

Tabs

Some developers create tabs by having scrolling tab panels to switch the active tab.

Table of contents

As demonstrated in this document, a table of contents could take advantage of scroll markers to give the user an indication of progress.

Thumbnails

In classic carousels or slide shows, the slide thumbnails / previews serve as links to those images / pages.