Coder Wrap provides free to use snippets Coder Wrap provides free to use snippets

Back to Others
Preview Source Code
Download
HTML
CSS
/**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

* {
	box-sizing: border-box;
}

body {
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	margin: 0px;
}

.gototop-title {
	text-align: center;
	padding: 40px;
}

/**Typeo CSS End**/
.gototop {
	width: 50px;
	height: 50px;
	box-shadow: #999 0 0 10px;
	position: fixed;
	right: -200px;
	bottom: 40px;
	transition: 0.8s all;
	cursor: pointer;
	 background-color: #fff;
    border-radius: 100%;
    z-index: 999;
}

.gototop:before {
	content: '';
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	top: 6px;
	margin: auto;
	width: 14px;
	height: 14px;
	border-left: #000 2px solid;
	border-bottom: #000 2px solid;
	transform: rotate(135deg);
}

.gototopshow .gototop {
	right: 20px;
}

.gototop:hover {
	background-color: #000;
	border-color: #000;
}

.gototop:hover:before {
	border-color: #fff;
}
JS
window.onscroll = function () {
if(window.scrollY > 400 ){
 document.querySelector('body').classList.add('gototopshow');
}else {
 document.querySelector('body').classList.remove('gototopshow');
}
}
function scrollToTop() {
 window.scrollTo({top: 0, behavior: 'smooth'});
}
document.querySelector('#scrollToTop').addEventListener('click', scrollToTop)

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *