Scroll To Top Button

April 04, 2015 - #jquery

Share this post: Google - Twitter - Facebook

Adding a scroll-to-top button creates a conveniant way for readers to get back to your top navigation, especially for a lengthy page on a mobile screen. Below is an example of a scroll-to-top button that appears when scrolling down a specific distance and disappers when scrolled back to the top.

Make sure you have the jQuery script at the bottom of your page.

<script src=""></script>

Tip: It’s best practice to store your javascript in a separate file and calling it after your jQuery source tag instead of including it in your markup.


<a href="#" class="scrollBtn">


.scrollBtn {
    text-align: center;
    background: rgba(0,0,0,0.5);
    padding: 0.5em 0.5em 0em 0.5em;
    bottom: 0;
    right: 0;
    margin: 0 1em 0.7em 0;
    position: fixed;
    font-size: 1.5em;
    font-weight: 700;
    color: #f7f7f7;
    border-radius: 3px;

a:hover.scrollBtn,a.scrollBtn {
    text-decoration: none;


$(function() {
    'use strict';
    var myButton = $('.scrollBtn');
    var myWindow = $(window);
    myWindow.on('scroll', function() {
            if ($(this).scrollTop() > 800) { //height from top to trigger
            else {
		$('html, body').animate({scrollTop : 0},800);
		return false;

You can see this in action on any of my pages. Shoot me a message if you have any questions.