Check me out on GitHub

hashjump

A tiny, dependency-free JavaScript module for handling anchor links and scrolling elements into view.

https://github.com/kodie/hashjump



Toggle Page Wide-Mode

Table of Contents

Section 1

You'll notice that all sections by default will scroll into view with the top of the section being at 25% of your window instead of directly at the top.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac laoreet nulla, in sollicitudin augue. Donec quis sapien ut libero congue aliquam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce vitae malesuada sem, id pulvinar libero. Fusce sed sapien erat. Fusce pellentesque magna a euismod bibendum. Integer nec pellentesque ligula, ac sodales lectus. Nam ut eleifend augue. Nullam a ex finibus, dapibus magna quis, sollicitudin nibh. Quisque malesuada, arcu nec vehicula consequat, nulla libero commodo purus, in viverra tortor libero ut elit. Quisque tempus vulputate elit, et euismod neque consectetur sed. Cras consequat tincidunt nisi id pulvinar.

Go back to Table of Contents

Section 2

Notice how when you navigate to this section using an anchor link, there's nothing in the URL for it? The hideUrlHash:true option is set here.

Also the element we scrolled to became focused because the focusElement:true option is set. (You have to have the tabindex attribute set on the element in order for this to work.)

Quisque a felis et mauris laoreet blandit. Nulla volutpat, arcu ut tristique interdum, purus erat pellentesque erat, sit amet suscipit elit odio sollicitudin leo. Curabitur sodales imperdiet faucibus. Maecenas vitae arcu quis nunc aliquam hendrerit ut vitae felis. Mauris luctus, metus ac ullamcorper laoreet, quam erat lacinia ligula, sed consequat dui enim vitae lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras maximus, ante at dapibus ultrices, augue leo tristique elit, a molestie metus eros at lectus. Mauris eu dictum erat. Cras molestie turpis magna, in ultrices nisi accumsan eget. Phasellus mi urna, suscipit vitae est id, tempor mattis leo. Nulla id mauris suscipit, fermentum metus eget, efficitur metus. Curabitur iaculis ante sit amet justo placerat viverra a vel lorem. Sed dapibus justo eget quam venenatis, et pellentesque massa ultrices. Suspendisse sed viverra quam. Donec at mauris sollicitudin, posuere felis ut, facilisis augue.

Go back to Table of Contents

Section 3

Donec convallis, diam nec tempus tincidunt, ipsum nisl fringilla lorem, ut vehicula nibh orci eget ipsum. Curabitur eget interdum lorem. Nunc sit amet viverra leo. Nulla vestibulum gravida pellentesque. Ut mollis nibh efficitur eros euismod, in sollicitudin tortor elementum. Quisque pellentesque, ipsum eget consequat iaculis, nibh libero auctor dui, ut dictum odio urna at dolor. Pellentesque varius scelerisque dictum. Nam vestibulum efficitur tellus sed faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet mi tempor lectus cursus mattis sed scelerisque velit. Ut vel orci magna. Maecenas nec commodo sem, quis consequat mauris. Proin in urna euismod, interdum odio quis, tincidunt est. Nullam id ante diam. Pellentesque ultrices purus quis orci congue ullamcorper. Integer et sagittis leo.

Go back to Table of Contents

Section 4

Notice how navigating to this section takes much longer than the rest? The scrollDuration:2000 option is set here.

This section also uses a different easing function for the scrolling animation by using the easingFunction option that is being passed a function from d3-ease (however hashjump does have a few easing functions built-in that you can use).

Also if you clicked the button instead of the link to get here, you'll notice if you take a look at the source of this file that we accomplished that by using the hashjump.to('section-4') function and didn't have to redefine options.

Lastly, this section will be centered on your screen horizontally as well as vertically due to the scrollOffset:'inner-50%' option.

Go back to Table of Contents

Section 5

Fusce libero diam, tincidunt nec vestibulum vel, bibendum eu justo. Mauris vitae blandit nisi. Donec rutrum eu nisi in congue. Praesent ultrices rutrum tortor. Nullam nec lobortis leo. Quisque efficitur, nibh et consequat placerat, purus est accumsan nulla, non congue massa elit eget justo. Donec condimentum quam vitae tortor sodales eleifend. Praesent arcu massa, lobortis at ante ac, dapibus imperdiet turpis. Etiam eget odio dapibus, accumsan orci nec, semper massa. Quisque maximus orci et ultrices pellentesque. Ut at dictum ex, sit amet luctus justo.

Go back to Table of Contents