Back to top button like Facebook app

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

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

Jquery/Javascript Responsive Web Design

Yet another enhancement of the simple Pinterest Style Grid Layout jQuery Plugin

by John Avis | November 16, 2017

I have made another change to the modified version of Mediademons Simple jQuery Plugin To Create Pinterest Style Grid Layout - Pinterest Grid.


Jquery/Javascript Responsive Web Design

Enhanced simple Pinterest Style Grid Layout jQuery Plugin

by John Avis | April 13, 2017

In response to a request, I have made some improvements to the modified version of Mediademon's Simple jQuery Plugin To Create Pinterest Style Grid Layout - Pinterest Grid.


Jquery/Javascript Responsive Web Design

Simple jQuery Plugin To Create Pinterest Style Grid Layout

by John Avis | March 9, 2016

When I was looking for an alternative to Masonry to produce a responsive Pinterest style grid that was a lot simpler and lighter weight I came across this jQuery plugin on www.jqueryscript.net that is very simple and works well. However, It has a few issues which I needed to fix before I could use it.

Comments

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

Leave a Comment
Tags
ASP.NET Html Forms ASP.NET MVC ASP.NET Web Forms ASP.NET Web Pages Bootstrap C# Classic ASP Cool Websites Databases eBay and PayPal Electrical Repairs General Hardware HTML/CSS Jquery/Javascript Media Center Mobile Phones Responsive Web Design SEO and Social Networking Web Design Web Development Web Security web+db Website Hosting Windows XP

About me

...mostly about web development and programming, with a little bit of anything else related to the Internet, computers and technology.

Subscribe

Get the latest posts delivered to your inbox.