Waypoints

Waypoints provide a convenient to automatically scroll to content on a page. They also provide the ability to land at a particular element on page load via the URL hash.



Usage

To setup a click-to-scroll event, simply add the .js-waypoint-trigger class to a clickable element, like a button

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.



Any element with a data-waypoint attribute provides the ability to land at that element on pageload using the URL hash. For example, http://example.com#landhere on pageload would scroll to the element with data-waypoint="landhere".

Options

You can specify the the animation speed as well as the animation easing via HTML data- attributes on the click-target. data-waypoint-speed sets the scroll animation in milliseconds, while data-waypoint-easing sets the scroll animation easing via a valid CSS easing property.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.