back to top

info(at)sypo.uk01539 741461

Fading In Back to Top Link

Posted on 11th September, 2018

By Mark Syred. Difficulty level: Intermediate

On whatever device you are viewing this site, you should notice an, 'up-arrow,' appearing when you scroll down the page. Click on this, and you will be taken back to the top of the page you are viewing, and the arrow will have disappeared.

This post explores how to add such an effect to your own site with a few short lines of HTML, jQuery, CSS and an image.

First, the HTML

This is split up into three parts: code for the document head; the target of the back-to-top link; and the link itself.

Code for the document head

As jQuery is a Javascript library, for any jQuery code to work on your site, you must first make reference to this library. This can be hosted on your site, or remotely. To reference it remotely, between the <head> and </head> tags on every web page of your site add:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

The jQuery that will make the back-to-top link work smoothly and appear when needed, ought to go in a separate Javascript file hosted on your site, and be referenced, also in the document head, something like this:

<script src="/path/to/javascript-file/scripts.js"></script>

/path/to/javascript-file should be replaced with the absolute path relative to the site root to wherever you upload your Javascript file to. In our case the path is: /themes/sypo/js/wbnscripts.js

The target of the back-to-top link

As you will be sending your website users, back to the top of the page, it makes sense that you add the target of the back-to-top link somewhere pretty near the top of the webpage. In the case of our site, it's on the header container, like this:

<div class="headercont" id="pagetop">

The link itself

The following can be added to your web pages anywhere you like, as its positioning will be taken care of by its CSS. On our site, we've added it immediately after the opening of the header container code, like this:

<div id="toTop">
    <a href="#pagetop">
        <img src="/path/to/image/back-to-top.png" alt="back to top">
    </a>
</div>

Second, the jQuery

All of the code in this section should be written into a separate, properly referenced Javascript file. For ease of reference, I've split it up into three parts: how the Javascript file should start and end; code to make the link appear; and code to make the link work.

How the Javascript file should start and end

// Code at the start of your Javascript file
$(document).ready(function() {


// Code at the end
});

What this code does is make the jQuery code only run after the HTML has finished loading: it forces the jQuery to wait until the document is ready. It's important to do this, otherwise the HTML could be manipulated by the jQuery before it's ready; affecting its functioning and the initial position of various elements.

Code to make the link appear

This will make the link appear as a user scrolls down the page. It will also make the link disappear again when the user is at the top of the page.

$(window).load(function(){
    $(window).scroll(function() {
        if ($(this).scrollTop()) {
            $('#toTop').fadeIn();
        } else {
            $('#toTop').fadeOut();
        }
    });
});

Code to make the link work

This code is not strictly required for the link to function, but it does add a nice effect. The browser will scroll smoothly to the top of the web page, rather than jump in one go. This creates a better experience for the user, as they are less likely to feel lost on your web page. Also, without the code, #pagetop will be appended to the URL in the address bar.

$("a[href='#pagetop']").click(function() {
    $("HTML, body").animate({
        scrollTop: 0
    });
    return false;
});

Third, the CSS

The CSS that follows will position the image that users will click on to return to the top of the page. In the example style below, it is over to the right of the screen, 130 pixels from the bottom. The z-index makes sure that the image is always on top. Adjusting most of the CSS to your liking will not affect the functioning of the button. The only part that should remain unchanged is display: none;

#toTop {
    position: fixed;
    bottom: 130px;
    right: 0;
    display: none;
    height: 40px;
    width: 40px;
    z-index: 50;
}

Lastly, the image

In the HTML above, instead of including an image, you could simply insert the words, 'Back to top,' or something similar. The jQuery is not reliant on there being an image, just a link. And, you can use whatever image you like. In case it would be helpful, you can download the image we use, here.

This website uses cookies to deliver the best experience whilst browsing. More info