Whenever I’ve been asked to build a landing page or put a single-page site together for someone, one of the ways that I’ve occasionally implemented navigation is by using the scrollUp jQuery Plugin.
In short, it’s a simple plugin that gives a nice effect such that when the user clicks on a navigation link, the plugin will display a ‘Back To Top’ option in the bottom right corner of the screen.
Nothing too complicated, but it’s well implemented and I’m a fan. The thing is, sometimes the ‘Back To Top’ anchor can interfere with certain footer elements.
scrollUp jQuery Plugin
Naturally, you can read more about the plugin on the project’s homepage. Straight from the site:
ScrollUp is a lightweight jQuery plugin to create a customisable “Scroll to top” feature that will work with any website, with ease.
You can also see it in action on the demo page.
But when using this particular plugin, there’s one hang up that I’ve experienced. Specifically, if you have a footer that contains text, a navigation menu, or, say, social icons, then the ‘Back To Top’ option may end up interfering with what the user sees.
Case in point:
So, obviously, you’d want to place the ‘Back To Top’ image a few pixels above the footer, but you only want to do it in the case of the other; otherwise, the image looks like it’s floating at a random place in the sidebar.
By hooking into the `window` objects `scroll` event, you can easily take care of this. Here’s a full gist explaining exactly how it’s going to work:
Simply put, if the user (or a script) scrolls to the bottom of the screen, then it will adjust the positioning of the ‘Back To Top’ image such that it sits above the footer elements; otherwise, it uses its default positioning.