HomeCSSButton AnimationBack To Top Button | HTML, CSS & jQuery

Back To Top Button | HTML, CSS & jQuery

Back to Top Buttons are used to scroll back to the top of a webpage. These buttons are usually used in websites with long webpages where-in navigating back at the top might be tiresome for the user. Back to Top buttons provide a shortcut link for the visitors that need swift access to the top of a webpage looking for navbar or trying to find the search bar. Considering these factors, we can say Back to Top Buttons are essential for websites with long webpages. So today, let us create a quick and easy Back to Top button. For this tutorial, we use jQuery. So before we move on to the coding part, let us quickly copy-paste the jQuery CDN link in between the of our HTML document.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Also, we need to include the CDN link of Fontawesome Icons.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

HTML

Let us start by creating an element with class name ‘my-bttn.’. The button contains an ‘Up arrow’ icon, so the purpose of this button remains clear to the user. I have used the font-awesome icon here. You can use SVG or CSS icons to reduce the loading time. Another alternative here could be using symbol Unicode. That is pretty much it for the HTML section.

<button class="my_bttn">
    <i class="fa fa-arrow-up"></i>
</button>

CSS

Styling the Button:

Now that we have created the button, let us style it. We create a square button by setting the height and width to 45 pixels. Make sure the button is not too big as it might block the visibility of content beneath the button. We use a bright pink color as the background color of the button. Using bright color ensures a good contrast between the button and the background of the webpage, thereby making the button stand out. We assign ‘none’ to the border attribute to get rid of the borders, so the button looks much cleaner. Similarly, we remove the blue outline that appears when the user clicks the button.

Next, we use a little border-radius to give the button a subtle, sleek look. We want the button to ALWAYS stay in the bottom right corner of the webpage despite any scrolling. Therefore, we set the position attribute to ‘fixed’. Also, we need to set the top and bottom attribute to 30 pixels to position it in the bottom-right corner. When the visitor hovers the mouse over the button, the user should know the button is clickable. Hence we use the ‘pointer’ value for the cursor attribute. We want the button to be visible only when the user has scrolled some particular distance from the top of the page. Therefore, for now, we hide the button by setting the ‘none’ to the display property.

.my_bttn{
    height: 45px;
    width: 45px;
    background-color: #F90F60;
    border: none;
    color: white;
    position: fixed;
    bottom: 30px;
    right: 30px;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    display: none;
}
Adding the Hover Effect:

We need a subtle hover effect for the button. For this purpose, we use the ‘:hover’ pseudo-class. On hover, the buttons scale up a bit and move up.

.my_bttn:hover{
    transform: scale(1.05) 
               translateY(-5px);
}

Javascript

We now have the layout and styling done. Let us now make the button functional. We want the button to be visible only when the visitor has scrolled a certain distance. In this case, the distance we are using is 300 pixels. To know the current position of the scrollbar, we use the ‘scrollTop()’ method on the browser window. Once the position of the scrollbar is greater than 300 pixels, i.e., the visitor has scrolled 300 pixels from the top, the condition inside the If statement becomes True. Now, the ‘If’ block executes, and the button becomes visible with a fadeIn method. If the user scrolls to the top, the button fades out and becomes again. We next, add an onclick event to the button. When the user clicks the button, the HTML document and the body animates to scroll back to the very top of the webpage, i.e., to position 0. We need this animation to happen smoothly; hence, we set the speed of animation to 400 milliseconds.

$(document).ready(function(){
    $(window).scroll(function(){
        if($(window).scrollTop()>300){
	    $('.my_bttn').fadeIn(250);
	}
	else{
	    $('.my_bttn').fadeOut(250);
	}
    });
    $('.my_bttn').click(function(){
	$('html,body').animate(
	    {scrollTop:0},400
	);
    });
});

So did you enjoy today’s tutorial? I would love to hear your suggestions and thoughts in comments below. Also you stay updated with latest tips and tricks by subscribing us on Instagram and Youtube.

RELATED ARTICLES

3 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

6 − 2 =

Most Popular