Creating a Scroll Up Button using HTML, CSS, and JavaScript Tutorial

Submitted by oretnom23 on Monday, February 20, 2023 - 17:39.

In this tutorial, you will learn to create a simple scroll-to-top button using HTML, CSS, and JavaScript. The main purpose of this tutorial is to provide the students and beginners with snippets that are reusable that might be useful for their projects. A working sample source code that demonstrates the interface and functionality of a scroll-to-top button is provided in this article.

What is the use of the Scroll-to-Top Button?

Scroll-to-top button is one of the common features or components in a web application, especially for sites that display long content on a single page. This feature allows your site user to scroll to the top of the site page in just one click.

How to create a scroll-to-top button?

Using JavaScript, we can simply trigger the client page window or element to scroll to the top. The following snippets are the sample script for triggering the page to scroll to the top.

Using Pure JavaScript

    document.getElementById('scroll-top-btn').addEventListener("click", function(){
        document.getElementsByTagName('html')[0].scrollTop = 0
    })

Using jQuery

    $('#scroll-top-btn').click(function(){
        $('html').scrollTop(0)
        // or
        $('html').animate({scrollTop:0})
    })

Creating a Reusable Scroll-to-top Button

Here are the scripts of the pre-made and reusable scroll-to-button with a simple design. The button will only show if the page is currently not on the top of the page interface. The button automatically appears at the button-right side of the page screen after or while the user is scrolling.

CSS

/** Scroll to Top Button */
div#sc-custom-floating-scroll-top-btn {
    position: fixed;
    z-index: 10;
    background: #147db8;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 15px;
    cursor: pointer;
    box-shadow: 0px 2px 4px #7e7e7e;
    animation: jump .5s infinite;
}
div#sc-custom-floating-scroll-top-btn:hover,
div#sc-custom-floating-scroll-top-btn:active{
    animation: unset;
 
}
@keyframes jump{
    0%{
    bottom:30px;
    }
    100%{
    bottom:35px;
    }
}
div#sc-custom-floating-scroll-top-btn>span {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
div#sc-custom-floating-scroll-top-btn>span:before {
    content: "";
    position: absolute;
    height: 30px;
    width: 9px;
    background: white;
}
div#sc-custom-floating-scroll-top-btn>span:after {
    content: "";
    position: absolute;
    background: #fff;
    border-left: 15px solid #147db8;
    border-right: 15px solid #147db8;
    border-bottom: 15px solid #fff;
    top: 7px;
}

The script above will result in something like the following image:

JavaScript

const   _scCustomSTbtn = document.createElement('div')
    _scCustomSTbtn.setAttribute('id', 'sc-custom-floating-scroll-top-btn')
    _scCustomSTbtn.innerHTML = `<span></span>`
if(document.getElementsByTagName('html')[0].scrollTop == 0)
_scCustomSTbtn.style.opacity = 0;
document.body.prepend(_scCustomSTbtn)
 
window.onscroll = function(){
if(document.getElementsByTagName('html')[0].scrollTop <= 0)
_scCustomSTbtn.style.opacity = 0;
else
_scCustomSTbtn.style.opacity = 1;
 
}
 
 
_scCustomSTbtn.addEventListener("click", function(){
document.getElementsByTagName('html')[0].scrollTop = 0
})
 
/** Using jQuery */
// $('#sc-custom-floating-scroll-top-btn').click(function(){
//     $('html').scrollTop(0)
//     // or
//     // $('html').animate({scrollTop:0})
// })

Here's a snapshot of a simple web page interface of how the scroll-to-top button looks in an actual web application page interface.

scroll-to-top button

There you go! You may also want to download the complete source code that I created for this tutorial. I have provided the source code zip file on this website and it can be downloaded for free. The download button is located below this tutorial's content.

That's it! I hope this Creating a Scroll Up Button using HTML, CSS, and JavaScript Tutorial will help you with what you are looking for and will be useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Add new comment

286 views