Software Engineering in WordPress and Musings on the Deep Life

The scrollUp jQuery Plugin (And Placing The ‘Scroll To Top’ Button)

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.


  1. Robert

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

    • Tom McFarlin

      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. Robert

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

  3. vova putin

    Tom thanks a lot!

  4. Roger

    Check this one:

  5. mehedi

    Nice one tom… very helpful.

  6. Rajkamal

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

    • Tom

      You’d have to look at how the element is created using Dev Tools and then apply the necessary styles from there.

  7. syed

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

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2023 Tom McFarlin

Theme by Anders NorenUp ↑