scrollUp jQuery Plugin Thumb

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

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:

scrollUp Interfering Footer

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.

Category:
Notes
Tags:

Join the conversation! 10 Comments

  1. what’s the best way to implement on wordpress site?

    • This would need to be added using wp_enqueue_scripts, wp_enqueue_styles to get the jQuery plugin added, and then add the necessary JavaScript so that the jQuery plugin is hooked up to your navigation system.

      Unfortunately, there’s not a one-size-fits-all solution because it largely depends on how the site is built.

  2. this is very nice by the way you make it sound super easy thanks for the post

  3. Tom thanks a lot!

  4. I want to change the color for my jquery smooth scroll to top button (plugin ) how to change the color ?

  5. thank u it’s more helpful for me ….. :)

Leave a Reply