<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>Animated Scroll-to-Top Button</
title
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
link
href
=
rel
=
"stylesheet"
>
</
head
>
<
body
class
=
"bg-gray-100"
>
<
div
class="h-screen bg-gray-300
flex items-center justify-center">
<
h1
class
=
"text-3xl font-bold text-gray-800"
>
About Us
</
h1
>
</
div
>
<
div
class="h-screen bg-gray-300
flex items-center justify-center">
<
h1
class
=
"text-3xl font-bold text-gray-800"
>
Home
</
h1
>
</
div
>
<
div
class="h-screen bg-gray-300
flex items-center justify-center">
<
h1
class
=
"text-3xl font-bold text-gray-800"
>
Contact Page
</
h1
>
</
div
>
<
button
onclick
=
"scrollToTop()"
class="scroll-to-top fixed bottom-4 right-4
bg-gray-800 text-white rounded-full
transition duration-300 hover:bg-gray-700
hover:text-gray-200">
<
img
src
=
class
=
"w-16 h-16 rounded-full bg-white"
alt
=
""
>
</
button
>
<
script
>
const scrollToTopButton =
document.getElementById('scroll-to-top');
// Show button when user scrolls down
window.addEventListener('scroll', () => {
if (window.pageYOffset > 100) {
scrollToTopButton.style.display = 'block';
} else {
scrollToTopButton.style.display = 'none';
}
});
// Smooth scroll to top
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
</
script
>
</
body
>
</
html
>