Add “Pull-to-go-back” and “Scroll-to-go-next” Navigation to Your Website with End Page Next

Navigation is the key to building an easy-to-use website and the more we simplify it, the better. Today, I’ve decided to experiment on a new way to navigate the page without even moving your mouse. The result is this plugin called “End Page Next”.

End Page Next is a plugin that will let you add hidden bars at the top and bottom of the page, where these bars will only appear when the users overscroll the page. The behavior is similar to the pull-to-refresh function, but with more options, support both at the top or at the bottom and fallback to normal navigation when the browsers cannot overflow.

How to Use End Page Next Plugin

Be warned: This plugin is very experimental and will only work fully on browsers that support elastic scrolling such as Mac's Chrome, and Mac's Safari. All other modern browsers have partial support, but main functionalities will still work nonetheless. I have not tested this on IE.

Add “pull-to-go-back” and “scroll-to-go-next” Navigation to Your Website with End Page Next

How does this work?

The difficulties in building this plugin lie not so much in the concept, but in the cross-browser problems I discovered later on in the process. The concept is simple, the plugin should create these bars automatically and attach them to the designated position relative to the document’s size. I then built a jQuery function that detects the scrolling behavior of the users, defines the direction and shows the bars only if the users have scrolled to the top or the bottom of the page. If the bar is currently shown and the scrolling behavior is idle, I will then start a timer and when the timer is up, the plugin should direct the user to the next/previous page.

This concept relies heavily on the elastic scrolling animation you get when using Chrome, and Safari on OSX, but what I forgot to consider was that this animation isn’t available on other platforms and browsers. I had to come up with a clever workaround to retain basic functionalities while being supported on the majority of browsers out there. What I ended up doing was to drop the scroll and hold function and only show the bars when the users have scrolled right to the bottom/top. This is ugly, but at least it doesn’t jeopardize the main purpose of the plugin, to help navigate better.

Now, your website will be equipped with “pull to go back”, and “scroll and hold to go next” functionalities when being viewed on browsers that support elastic scroll, and will continue to function on all other browsers.

How-Tos

To use this plugin, you will need to include the latest jQuery library available here, jQuery.endpage_next.js and endpage_next.css which can be found here, in to your document’s <head>.

The good thing about this plugin is that you don’t need any HTML markup to use it. All you need to do is call the function as follows:

JS

$("body").endpage_next({
     speed: 10,                        
     waitTime: 2500,                   
     position: "bottom",               
     type: "overlay",                  
     topHTML: "Go to Previous Page",       
     topUrl: "#",                       
     bottomHTML: "Go to Next Page",  
     bottomUrl: "#"                    
  });

That’s all you need to enjoy this plugin. The settings above will give you a basic “scroll and hold to go next” functionality which will appear when the user scroll to the bottom with an overlay effect. If you are not happy with the result, you can customize the plugin’s behavior to your own likings with these options:

  • speed: You will be able to define how fast the bar reacts to your scroll when pulling. Try reducing this number to make it harder to pull. The default value is 10.
  • waitTime: By default, the plugin will trigger a redirect after the user holds their scroll for 2500 milliseconds. You can make it faster or slower by changing the value here.
  • position: You can choose the position where you want the bar to be by changing this option here. Acceptable values are “top”, “bottom” or “both”. "Top" will position the bar at the top and perform like “pull to go back” function. "Bottom" will position the bar at the bottom and perform like "scroll & hold to go next" function, and "Both" will let you have both "top" and "bottom" functionalities in one page. The default value is "bottom".
  • type: This option will let you define the animation you will get when the bar appears. Available options are “overlay”, which will have the bar appearing on top of your document’s content whereas for “push”, the bar will push the whole content downward/upward. The default value is “overlay”.
  • topHTML: You can set the HTML content of the top bar here. The default content is "Go to Previous Page".
  • topUrl: You can set where the top bar will take the user to by providing the URL here in place of the hash tag. The default value is "#".
  • bottomHTML: You can set the HTML content of the bottom bar here. The default content is "Go to Next Page".
  • bottomUrl: You can set where the bottom bar will take the user to by providing the URL here in place of the hash tag. The default value is "#".

Conclusion

And that’s all for the "End Page Next" plugin I built to experiment with a new way to navigate a website. I hope you enjoy this little tutorial. One thing I hope you learned from this article is that you should test the limitations of your idea before building the plugin.

I realized this right after I launched the plugin on Github and so there was no turning back for me. The best thing I can do is to create a workaround so that it doesn’t break developer’s websites on unsupported browsers. If you have any questions or a suggestions, feel free to let me know in the comments below.