Go To Top Code For Website Smooth
Publish: 11 March 2024, 5:33 pm IST | Views: 
263
केवल जरुरी कोड को उपयोग करें बांकी कोड को Remove कर दे,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Go To Top Smooth</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button id="goToTopBtn">Go to Top</button>
<div class="content">
<!-- Your webpage content here -->
<!-- This content will make the page long enough to scroll -->
</div>
<script src="script.js"></script>
</body>
</html>
<style>
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.content {
height: 2000px; /* Adjust this height according to your content */
}
#goToTopBtn {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
border-radius: 5px;
z-index: 1000;
transition: opacity 0.3s;
}
#goToTopBtn.show {
display: block;
}
</style>
<script>
window.addEventListener('scroll', function() {
var scrollToTopButton = document.getElementById('goToTopBtn');
if (window.scrollY > 300) { // Adjust this value as needed
scrollToTopButton.classList.add('show');
} else {
scrollToTopButton.classList.remove('show');
}
});
document.getElementById('goToTopBtn').addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
</script>
Categories: Coding
Tags: Go To Top, Scroll to Top
