Back to top button like Facebook app

John Avis by | September 15, 2017 | Jquery/Javascript Web Development

The Facebook app on Windows phone has a nice and unobtrusive back to top button that only appears once you scroll past a certain point, and only when you start scrolling up the page. This code offers similar functionality using jQuery.
Facebook-like back to top

The Facebook app on Windows phone has a nice and unobtrusive back to top button that only appears once you scroll past a certain point, and only when you start scrolling up the page.

The following code offers similar functionality using jQuery.

HTML

First you need to add the back to top button itself. In this example it's just the text "TOP", but you can replace this with an image or icon font symbol or whatever you want.

This element should be placed just before the closing "body" tag, and not inside any element with "position: relative", unless you want to change how it is positioned.

<a id="scroll-top" href="#" style="display:none;">TOP</a>

Note the href attribute is set to "#". The script below uses jQuery to animate scrolling to the top of the page, but you may wish to use an anchor reference instead here.

CSS

To give the button fixed positioning and place it near the top right corner, you will need some styling. You can change the position if you like.

I've also set the font size to 34 pixels in this example.

#scroll-top {
position: fixed;
top: 10px;
right: 10px;
font-size: 34px
}

JavaScript

Here's the JavaScript (using jQuery) that shows and hides the button as needed.

I use setInterval so I can track when the user is scrolling up.

Where you see the number "100", this is the number of pixels down from, the top that the button will be displayed after. That way it won't be shown over your header and if the user is near the top of the page they don't really need a back to top button then anyway.

$(function() {
var lastPos = $(this).scrollTop();

setInterval(function() {
var thisPos = $(this).scrollTop();
if ($(this).scrollTop() > 100 && thisPos < lastPos) {
$("#scroll-top").show();
} else {
if ($(this).scrollTop() <= 100 || thisPos > lastPos) {
$("#scroll-top").hide();
}
}
lastPos = thisPos;
}, 150);

$("#scroll-top").click(function() {
$("html, body").animate({
scrollTop: 0
}, 500);
return false;
});
});

Example

Want to see it in action?

Example on JSFiddle

Related Posts

Computers & Internet Web Development Website Hosting

500 Internal Server Error after migrating from IIS 7.5 to IIS 10

by John Avis | November 4, 2019

As support ends for Microsoft Windows Server 2008 I have recently gone through migrating some websites to a new server running Windows Server 2016 and IIS 10 but some of the websites did not work.


Jquery/Javascript Web Development

tagInput: A simple jQuery plugin for tag entry using Bootstrap 4

by John Avis | October 15, 2019

For a website project I needed a way to enter multiple tags. I just wanted something simple that I could easily modify to suit my own needs, so I wrote my own.


ASP.NET Web Forms Web Development

ASP.NET bug with RadioButton GroupName in Repeater

by John Avis | September 1, 2019

I rediscovered a bug in ASP.NET that affects RadioButtons inside repeaters. Here is my solution to the problem.

Comments

There are no comments yet. Be the first to leave a comment!

Leave a Comment

Tags

About me

...random postings about web development and programming, Internet, computers, electronics and automotive topics.

Subscribe

Get the latest posts delivered to your inbox.