back to top
shopping basket

View your basket

Negative scanning service

What our customers are saying:

Brilliant service, thank you.

Read more...

Fading in, Back To Top Link With CSS and jQuery

Fading in, Back To Top Link With CSS and jQuery

PiciScan Web Design Blog RSS Feed

Posted on: Thursday, 07 May 2015

On whatever device you are viewing this site, you will 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, Javascript, CSS and an image.

First, the HTML

The HTML below ought to appear as close as possible following the opening body tag. The first part adds a new div id, the size and location of which you will style later. The second adds an id to the first div class that forms the very top of the visible part of your page. I have just drawn from the code that runs our site and have used header-container as an example. The title of this div class will not make any difference to the functioning of the back-to-top link.

<div id="toTop">
<a href="#pagetop">
<img src="/images/back-to-top.png" alt="back to top">
</a>
</div>
<div class="header-container" id="pagetop">

Second, the Javascript

Within the head, evoke jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type==text/javascript"></script>

And just before the html you have included above, add in this Javascript:

<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
$(window).scroll(function() {
    if ($(this).scrollTop()) {
        $('#toTop').fadeIn();
    } else {
        $('#toTop').fadeOut();
    }
});
});//]]>
</script>

Leave the Javascript as it is, unless of course, you know what you're doing and want to modify it somehow.

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, 30 pixels from the bottom. The z-index makes sure that the image is always on top. Adjusting any of the CSS to your liking will not affect the functioning of the button.

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

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 Javascript 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 I use, here.

Mark founded PiciScan in 2010, and sold it in October 2015 to Web By Numbers Ltd, who now employ him! He likes Star Wars, playing escape games and looking after his bonsai tree.

comments powered by Disqus

The Latest From our Scanning Blog

Christmas 2015

Christmas 2015

Posted: 14 December 2015

It’s nearly the time of year to be going up into the loft and bringing down all the Christmas decorations, locating the tree and seeing if those lights from last year still work, or if you need to buy any more...

Read more

The Latest From our Web Design Blog

Box Sizing: Border-Box

Box Sizing: Border-Box

Posted: 24 March 2016

I first came across box-sizing: border-box when it cropped up in a temporary colleague's CSS. I found it pretty annoying when I picked up work that he'd started as it seemed to get in the way. This was because, as I said in a previous post on margin ...

Read more