Go to top button | go to top button using html css and js
GO TO TOP BUTTON | GO TO TOP BUTTON USING HTML CSS AND JS
Welcome in Code with Random today in this tutorial we are going to create GO TO TOP BUTTON USING HTML CSS AND JS.In this we are making a top button which is going top of webpage when we scroll up. In this the page is big and we are in end of page then in end of page their is a top button click on top button and that button take us in top of webpage that means in first page .
So….Let start to create a top button……
LIVE SERVER:-
See the Pen Go-to-Top Button by Mario Rodriguez (@mariordev) on CodePen.
HTML CODE:-
here we are adding this <a href=”#” id=”c-go-top” class=”c-go-top”>line for top button and h1 class means heading of topic then long para.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="index.js">
</head>
<body>
<div class="max-w-sm mx-auto px-4 py-12 leading-loose text-lg">
<a href="#" id="c-go-top" class="c-go-top">
<i class="fa fa-arrow-up fa-fw"></i>
</a>
<div class="bg-black text-yellow p-4 mb-8">
<p>Scroll down to make the "go to top" button appear on the bottom right corner of the screen.</p>
</div>
<h1 class="mb-10">To the Top!</h1>
<p class="mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus venenatis volutpat ligula, sed porta purus rutrum non. Morbi laoreet mattis dolor, ut lobortis purus maximus sit amet. Morbi pulvinar ultrices scelerisque. Nunc rhoncus odio in dolor porttitor, et ullamcorper metus pharetra. Proin ullamcorper leo purus, eget lobortis quam elementum ac. Quisque eget augue ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed dapibus leo eget sodales imperdiet.</p>
<p class="mb-10">In vel lobortis purus. Morbi non dolor nec risus commodo varius. Aliquam id neque a lectus auctor efficitur nec ut velit. Duis a varius dui. Proin semper nisl sed malesuada convallis. In viverra, enim suscipit dictum venenatis, libero diam pretium erat, quis fringilla justo ante a orci. Nullam a ligula posuere odio fermentum finibus. Sed non nibh ex. Fusce et leo nec erat vulputate ornare. Sed suscipit pretium placerat. Vestibulum luctus pellentesque neque, quis viverra erat dignissim vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p class="mb-10">Ut id nisi rutrum velit auctor aliquam vitae sed magna. Fusce et efficitur ante. Quisque vitae nulla et magna gravida lobortis ut eget augue. Nullam eleifend, ipsum et feugiat viverra, orci lacus mollis diam, vitae luctus turpis orci ut nisl. Quisque vitae posuere massa, fermentum laoreet arcu. Donec luctus nisl ut finibus finibus. Suspendisse bibendum turpis turpis, volutpat tempus metus lobortis et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean lacinia molestie vulputate. Ut consectetur fermentum cursus. Mauris porta libero ac urna mattis dapibus. Phasellus pretium turpis vitae sagittis pretium.</p>
<p class="mb-10">Morbi iaculis porttitor semper. Sed pretium a est efficitur efficitur. Morbi quis nisi mollis dolor porttitor sodales nec nec justo. Duis tincidunt faucibus elit. Fusce ornare nec massa in ullamcorper. Integer aliquam, ligula sit amet ultrices pharetra, ex libero fringilla nibh, nec lobortis dui magna ut leo. Phasellus in placerat ipsum, commodo volutpat mi. Fusce id vestibulum magna. Fusce ut convallis nisi, rhoncus euismod ligula. Quisque et diam elit.</p>
<p class="mb-10">In quis magna malesuada, interdum nisl non, maximus dui. Sed hendrerit consequat eleifend. Suspendisse nec commodo nulla, vel scelerisque velit. Phasellus interdum nec magna eu ornare. In dictum lorem sem, vitae hendrerit lorem tempus accumsan. In nec leo tortor. Maecenas non magna odio. Aliquam finibus id nunc sit amet molestie. Aenean sagittis orci ut convallis sollicitudin. Praesent vehicula mi a est lacinia cursus.</p>
<p class="mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus venenatis volutpat ligula, sed porta purus rutrum non. Morbi laoreet mattis dolor, ut lobortis purus maximus sit amet. Morbi pulvinar ultrices scelerisque. Nunc rhoncus odio in dolor porttitor, et ullamcorper metus pharetra. Proin ullamcorper leo purus, eget lobortis quam elementum ac. Quisque eget augue ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed dapibus leo eget sodales imperdiet.</p>
<p class="mb-10">In vel lobortis purus. Morbi non dolor nec risus commodo varius. Aliquam id neque a lectus auctor efficitur nec ut velit. Duis a varius dui. Proin semper nisl sed malesuada convallis. In viverra, enim suscipit dictum venenatis, libero diam pretium erat, quis fringilla justo ante a orci. Nullam a ligula posuere odio fermentum finibus. Sed non nibh ex. Fusce et leo nec erat vulputate ornare. Sed suscipit pretium placerat. Vestibulum luctus pellentesque neque, quis viverra erat dignissim vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
</body>
</html>
HTML OUTPUT:-
In this output we cant see the top button only we see the basic partt like heading and para.
CSS CODE:-
In css code we see top button but top button will not work only design we will see.
and we add some basic that we add in every css like background border etc which given in css code.
their is go to top button design.
body {
background-color: #eee;
}
.c-go-top {
background: none repeat scroll 0 0 padding-box #1099dd;
bottom: 20px;
border: 1px solid #1099dd;
border-radius: 4px;
color: #eee;
display: none;
font-size: 12px;
opacity: 0.8;
padding: 10px;
position: fixed;
right: 5%;
text-decoration: none;
z-index: 999;
}
.c-go-top:hover,
.c-go-top:focus,
.c-go-top:active,
.c-go-top:visited {
color: #fff;
outline: 0;
text-decoration: none;
}
CSS OUTPUT:-
JS CODE:-
In js we can see and work the top button and in every para top button is metion.which is in blue colour and small in size which is in right side.When we click on button it will scrool top.
$(function() {
// Amount of scrolling before button is shown/hidden.
var offset = 100;
// Fade duration
var duration = 500;
// Toggle view of button when scrolling.
$(window).scroll(function() {
if ($(this).scrollTop() > offset) {
$('#c-go-top').fadeIn(duration);
} else {
$('#c-go-top').fadeOut(duration);
}
});
// Scroll to top when button is clicked.
$('#c-go-top').click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: 0
}, duration);
return false; Yyo
});
});
JS OUTPUT:-
Finally…. your GO TO TOP BUTTON is ready.You can use in many website to make website beautiful and attractive.
Hope you like this blog……If any doubt comment in comment section.
Thankyou…….
