smartscroll - Scrolljacking jQuery plugin

smartscroll is a tiny (919b minfied + gzipped) jQuery scrolljacking and auto-hashing plugin. (Demo)

Features

  1. Scrolljacking - scroll section by section
  2. Auto-hashing - URL hash will automatically update whenever the scroll position changes
  3. Bookmark-friendly - You can bookmark the page with the hash, and it will return to that section later
  4. Clean history - Scrolling to different sections do not register on your browser's history

Comparison

So how does it stand out from the others? We've made comparisons with the following plugins:

Compatible with scrollbar

With smartscoll, you can scroll with the mouse wheel as well as the scrollbar

fullPage.js does include this option.

In localScroll, you can only scroll using buttons, using the scrollbar or mousewheel is not supported.

Alton allows you to scroll using the scrollbar, but does not register the new position correctly. If you scroll using the scrollbar all the way to the bottom, then mousewheel up, you'll get a Uncaught TypeError: Cannot read property 'top' of undefined error. Similarly, if you mousewheel down twice to the third panel, scroll to the bottom and then mousewheel up once, you'll move two panels up - to the second panel instead of the third.

Hybrid Scrolling

With smartscroll, you can have some regions with normal scrolling, and some with scrolljacking, all on the same page

fullPage.js has a normal scroll feature, which allows you to scroll 'normally'. But AFAIK, you cannot have both normal scrolling and scrolling by section, all on the same page.

Alton supports this feature, which they termed HeroScroll.

localScroll does not support this.

Varied Section Heights

With smartscroll, sections can have different heights

AFAIK, all three plugins requires each section to be fullscreen.

Auto-Hashing

With smartscroll, the URL hash will change based on the section you're currently on

Both fullPage.js and localScroll supports this. Alton does not.

Limitations

Currently, it does not support horizontal scrolling. If you'd like to see those features implemented, please register your interests by opening/commenting on an issue.

Which to use?

Personally, I wouldn't use Alton because all its functionalities can be found here, using smartscroll. I'd use localScroll if I know every section will be of the same size, and I only need to have simple X/Y scrolls. Otherwise, fullPage.js is good for most use cases.

smartscroll was created because I have not found a plugin out there which supports all four of the features described above - Compatibility with scrollbar, Hybrid Scrolling, Varied Section Heights and Auto-Hashing.

Use smartscroll if you need these features, otherwise use fullPage.js

A Personal Note

Personally, I am not a fan of scrolljacking, I love simplistic, no-nonsense design (just look at my website). But sometimes, especially for small teams, where the designers or clients are not UX-minded and demands scrolljacking, I hope you found this plugin useful.

comments powered by Disqus