Elementals.js

eSmooth.js

View the Demo live here

This little sub-library uses elementals.js to allow you to simply and easily add smooth scrolling to on-page hash-links, assuming they are targeting by ID and not name.

By default this functionality is only provided in IE 11 and modern browsers. You can override this to try and force it on older browsers, but if you do so any on-page hash links will not go into the browser history since the actual click event has to be cancelled to avoid the annoying initial flicker. In some instances this behavior is fine, in others, not so much.

Usage

Simply include eSmooth.js after you load elementals.js before the </body> tag thus:

<script src="../scripts/elementals.js"></script>
<script src="eSmooth.js"></script>

The script will automatically hook all anchors that have hash links targeting the current page.

data- parameters

You can place the following data- attributes on your anchors to change how eSmooth.js handles it.

data-eSmoothNoHistory

If present on an anchor who's hash targets the current page, clicking on this anchor will NOT have its target href added to the browser history.

data-eSmoothNoScroll

A link that has this attribute on it will NOT smooth scroll, and instead use whatever the browsers native behavior is.

HTML

<a href="#top" data-eSmoothNoScroll>
	Back To Top without smooth scroll
</a><br>
<a href="#top" data-eSmoothNoHistory>
	Back To Top without adding to browser history
</a>

The first anchor will not smooth scroll. The second will, but does not add to browser history.

Note, for the time being if you mix these two parameters, only data-eSmoothNoScroll will function.

Global Variables

By default eSmooth exposes no global variables, but there are values you can set to change its behavior. If you wish to change these variables you must do so BEFORE you include eSmooth.js in your markup.

_eSmoothAccelerate

Controls the speeed at which the animation speeds up at the start. Defaults to 2.

_eSmoothForce

Forces the smooth scrolling behavior to work in legacy browsers that are incapable of performing a history.pushState. Pretty much that's IE10/earlier. As such in those browsers clicking on hash links will no longer let users hit 'back' to return to where they were. Hence it being disabled by default in those browsers!

_eSmoothMaxRate

The maximum number of pixels allowed to scroll in one animation frame. Defaults to 128.

_eSmoothNoHistory

If this is set to a loose true, any anchors that have smooth scrolling added to them will NOT have their action added to the browser history! This has the same effect as if you declared the [code]data-eSmoothNoHistory[/code] attribute on every single anchor.

JavaScript

<script src="../scripts/elementals.js"></script>
<script>
	eSmoothForce = true; // force it on in legacy browsers despite bugs
	eSmoothAccelerate = 1; // slower speed-up
	eSmoothMaxRate = 32; // pretty slow maximum scroll speed
	eSmoothNoHistory = true; // no browser history on smooth links
</script>	
<script src="eSmooth.js"></script>

Full code and examples are provided in the "Complete library with demos" download.