I this tutorial i will show you how to create a scroll to top button in html with javascript and jquery.
Just add all code step by step and all done!!
step 1. Create HTML file
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/
font-awesome.min.css" rel="stylesheet">
</head>
<body>
A
<br/><br/><br/><br/><br/><br/>
B
A
<br/><br/><br/><br/><br/><br/>
B
A
<br/><br/><br/><br/><br/><br/>
B
A
<br/><br/><br/><br/><br/><br/>
B
A
<br/><br/><br/><br/><br/><br/>
B
A
<br/><br/><br/><br/><br/><br/>
B
A
<br/><br/><br/><br/><br/><br/>
B
A
<br/><br/><br/><br/><br/><br/>
B
A
<br/><br/><br/><br/><br/><br/>
B
A
<br/><br/><br/><br/><br/><br/>
B
A
<br/><br/><br/><br/><br/><br/>
B
<a href="#" class="Scrolltotop"><i class="fa fa-arrow-up" aria-hidden="true"></i>
</a>
</body>
</html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/
font-awesome.min.css" rel="stylesheet">
</head>
<body>
A
<br/><br/><br/><br/><br/><br/>
B
A
<br/><br/><br/><br/><br/><br/>
B
A
<br/><br/><br/><br/><br/><br/>
B
A
<br/><br/><br/><br/><br/><br/>
B
A
<br/><br/><br/><br/><br/><br/>
B
A
<br/><br/><br/><br/><br/><br/>
B
A
<br/><br/><br/><br/><br/><br/>
B
A
<br/><br/><br/><br/><br/><br/>
B
A
<br/><br/><br/><br/><br/><br/>
B
A
<br/><br/><br/><br/><br/><br/>
B
A
<br/><br/><br/><br/><br/><br/>
B
<a href="#" class="Scrolltotop"><i class="fa fa-arrow-up" aria-hidden="true"></i>
</a>
</body>
</html>
Step 2:- Add Style Tag above Body tag
<style>
body
{
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 5em;
width: 100%;
height: 100vh;
padding: 100px;
box-sizing: border-box;
}
.Scrolltotop
{
position: fixed;
bottom: 80px;
right: 80px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background: 0063e8;
color: black;
}
.Scrolltotop:hover
{
color: red;
}
</style>
Step 3 :- Add script tag inside body tag
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(".Scrolltotop").click(function () {
$("html, body").animate({ scrollTop: 0 }, 3000);
return false; // prevents the default action of the event being triggered
});
</script>
<script>
$(".Scrolltotop").click(function () {
$("html, body").animate({ scrollTop: 0 }, 3000);
return false; // prevents the default action of the event being triggered
});
</script>
No comments:
Post a Comment