Back to Top button in HTML

 


Users can smoothly scroll back up the page by clicking the Back to Top button. Users can enjoy the website more when this feature is available. In the case of a web page with a lot of content, a scroll to the top option will take the user to the top.

With the help of jQuery and CSS, we will create a Back To Top button. With this Back to Top button, you can easily navigate long pages on your site. On the bottom-right corner of the content area, a button will appear automatically after the browser window has been scrolled down. Clicking this button will cause the page to scroll up automatically. By clicking this button, the user can scroll to the top of the web page from the bottom without having to manually scroll the page. Thus, the BackToTop button facilitates navigation.

The Back to Top button can easily be created using jQuery and CSS. The following example script shows how to integrate a BackToTop button into your website using jQuery and CSS. This scroll to top jQuery plugin is an easy way to add back to top functionality to a web project.

Using any third-party jQuery plugin will not allow you to create a Back to Top button for your website.

HTML

When a user clicks the BackToTop button, the page will go to the top.

<a href="javascript:void(0);" id="scroll" title="Scroll to Top" style="display: none;">Top<span></span></a>

JavaScript

This script relies on jQuery, so you first need to include the jQuery library.
 If the page is scrolled down, the following jQuery displays the button.

You can check whether the page has been scrolled by using the scroll() method in JavaScript. The button will display if the page has been scrolled down by more than 100 pixels, otherwise, it will be hidden.

$(window).scroll(function(){
    if($(this).scrollTop() > 100){
        $('#scroll').fadeIn();
    }else{
        $('#scroll').fadeOut();
    }
});

Click events are tracked with the following jQuery code. The page will scroll to the top when the user clicks the button. When scrolling to the top of the page, we use the animate() function and scrollTop event.

$('#scroll').click(function(){ 
    $("html, body").animate({ scrollTop: 0 }, 600); 
    return false; 
});

The complete JavaScript code for Back to Top button.

<script type="text/javascript">
$(document).ready(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 100){
            $('#scroll').fadeIn();
        }else{
            $('#scroll').fadeOut();
        }
    });
    $('#scroll').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});
</script>

CSS

The following CSS code is used to style the BackToTop button.

#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff
}
#scroll:hover {
    background-color:#e74c3c;
    opacity:1;
    filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}

BackToTop Button Script

The following script integrates the scroll to top button on the web page using HTML, JavaScript, and CSS.

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>jQuery Back To Top Button by CodexWorld</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 100){
            $('#scroll').fadeIn();
        }else{
            $('#scroll').fadeOut();
        }
    });
    $('#scroll').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});
</script>
<style type="text/css">
/* BackToTop button css */
#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff
}
#scroll:hover {
    background-color:#e74c3c;
    opacity:1;
    filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}
</style>
</head>
<body>

<!-- BackToTop Button -->
<a href="javascript:void(0);" id="scroll" title="Scroll to Top" style="display: none;">Top<span></span></a>

<!-- ++++++++++++ Page Content Goes Here ++++++++++++ -->

</body>
</html>

Conclusion

The back to top button was implemented in this tutorial using a simple script. The BackToTop button can easily be customized by modifying CSS code. Go through the following tutorial if you wish to scroll a specific part of the web page.

*

Post a Comment (0)
Previous Post Next Post