Published - | Updated - April 19, 2021 09:33 am
363 Views
In this article, we will show you How to scroll back to top in bootstrap. This article will give you simple example of How to scroll back to top in bootstrap. you will learn How to scroll back to top in bootstrap.
<!DOCTYPE html>
<html>
<head>
<title>How to scroll back to top in bootstrap</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<style>
.back_to_top {
position: fixed;
bottom: 25px;
right: 25px;
display: none;
}
</style>
</head>
<body>
<a id="back-to-top" href="#" class="btn btn-light btn-lg back_to_top" role="button"><i class="fas fa-chevron-up"></i></a>
<script>
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-to-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
</script>
</body>
</html>