Published on: 08 January, 2016

How to create back to top link using CSS and JQuery

Posted by andy | 1117 views 0 likes 0 favourites 4 comments
Tumblr Digg Google Plus

You may have seen a back to top link from sites you have visited and may wonder how they create that navigation. In this tutorial, I will show you step by step to create the this handy link. Firstly, we need to place a div contains the navigation link, in this particular example, we will have an arrow navigation in circle shape located at the right bottom position. You can place the following code inside the body page, it can place after the body or at the very end of the code. Remember that it should be placed under a parent which does not have a position relative on it. So, to be safe, place it inside the body html tag.

<div id="top-navigator"><div id="arrow-up"></div></div>

Once it has been placed, it is time to create css for the div object. One of the important style of this css is the position fixed property. This will make sure the object back to top link stay in fixed position. You will see that I apply 3% to the bottom and right position. You can change this to another values if you prefer. I would recommend to use percentage rather than px, rem, etc. Another style is the z-index value, make sure this number is the highest number represents on your css files, as this is going to be sitting on the top of your page content. And last important part is the display:none property. This makes the navigation by default hidden until a scrolling of the page exists.

#top-navigator{
    position:fixed;
    right:3%;
    bottom:3%;
    text-align:center;
    border-radius:100%;
    background:#010211;
    width:30px;
    height:30px;
    padding:6px;
    font-size:1.5rem;
    opacity:.8;
    z-index:99999;
    cursor:pointer;
    display:none;
}

#top-navigator:hover{
    opacity:.9;
}

#arrow-up{
    width:0;
    height:0;
    border-left:12px solid transparent;
    border-right:12px solid transparent;
    border-bottom:12px solid #fff;
    font-size:0;
    line-height:0;
    margin:0 auto;
    display:inline-block;
}

One of the amazing from the css is you can easily create an top arrow by using combination of the border positions. Looks great right? Don't have to use an image. If you prefer to use an image, simply add an image inside the div and you can remove the style for #arrow-up.

The last part of the important work is to include the JQuery script and add some javascript to trigger the event when the scrolling is happening. Please see below code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(window).scroll(function () {
        if ($(this).scrollTop()) {
            $('#top-navigator:hidden').stop(true, true).fadeIn();
        } else {
            $('#top-navigator').stop(true, true).fadeOut();
        }
});

$("#top-navigator").click(function () {
        $('html, body').animate({ scrollTop: $('html').offset().top }, 1000);
});
</script>

Hope this tutorial helps and you can see directly the action on our site. If you see there is a long content, the back to top navigation should appears on the bottom right of the browser.

Comments
Antman
Commented on: 24 May, 2016 08:04:52 AM
Andy, I can get the arrow to show on scroll and fade out when I scroll to the top. The only trouble is when I click on the arrow it doesn't do anything. Can you explain where the need to go in the please. Cheers Antman
andy
Commented on: 20 Jun, 2016 10:51:27 PM
Hi Antman, Sorry for the late reply. Being away for a month. Looks like there is a javascript error? Could you make sure you are not loading the jquery script twice? Do you have a demo url I can have a quick look?
Julia
Commented on: 11 Oct, 2016 09:35:20 PM
Hi, I'm a newbie. Do you have the code for "simply add an image inside the div "? Thanks!
andy
Commented on: 12 Oct, 2016 09:50:30 AM
You can insert a css background into the div if you want. You can use something like this: <div style='background:/images/mybackground.jpg' width='200' height='200'></div>
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 22 March, 2016
In this tutorial, you will learn how to create a category menu list using css and JQuery framework. You will also learn on how to automatically place an arrow into the LI element if it founds there is a sub menu list. The placement of the arrow is done via JQuery, this includes binding the event onclick on the LI element as well to expand and collapse the sub menu list.
Published on: 08 March, 2016
Completely new to JQuery script? Don't worry, you are not alone. We have summarize a list of tips for newbie to learn JQuery faster. The best way to strength your JQuery skills is by testing our tips directly in your html files and run it.
Published on: 02 May, 2014
Are you lazy to google the quick jquery code snippet for your website? Look no further, we have included a quick summary list of JQuery code to help you faster coding to save your time. Starting from how to check if an object is visible or how to tick a check box programmatically using JQuery.
Related Tutorials
Published on: 25 January, 2016
So what actually an event? An event can be considered as a result of an action triggered by a process which can be a process clicking of a user or when a page is loading.
Published on: 20 December, 2015
Learn how easily to manipulate DOM element selection using JQuery. One of the cool feature from JQuery is the DOM selector. In javascript, when you want to reference an object, you can refer the object either based on ID or class name of the object by using the built in function such as getElementById or getElementByTagName or getElementsByClassName.
Published on: 15 December, 2015
Getting started by writing your first JQuery code. Learn how to create it from scratch and apply it on your site. The best way to start your first JQuery function is after the browser has completedly loaded the page content. There are two short methods to do so.
Published on: 13 December, 2015
Learn what is the JQuery framework is and why many web developers and designers love to this framework.