back to top button

This commit is contained in:
Gary 2025-09-17 20:51:17 -07:00
parent fd46e1aaba
commit c214b6d7e2
3 changed files with 32 additions and 1 deletions

View File

@ -242,7 +242,7 @@ a {
height: fit-content;
position: relative;
z-index: 1;
background-color: whitesmoke;
background-color: white;
}
.button-4:hover {
border: 2px solid black;
@ -343,6 +343,21 @@ a {
.mobile-menu-icon {
display: none;
}
#back-to-top {
position: fixed;
bottom: -40px;
right: 20px;
background-color: #43786b;
color: #fff;
border: none;
padding: 10px;
border-radius: 10px;
cursor: pointer;
}
#back-to-top.show {
bottom: 20px;
}
/* Media query for mobile devices */
@media all and (max-width: 960px) {

View File

@ -48,6 +48,7 @@
<script src="./js/jquery-3.7.1.min.js"></script>
<script src="./js/main.js"></script>
<script src="./js/navbar.js"></script>
<script src="./js/back-to-top.js"></script>
</head>
<body>
@ -297,6 +298,8 @@
</div>
</div>
</main>
<button id="back-to-top">Back to top!</button>
<footer id="footer"></footer>
</body>
</html>

13
js/back-to-top.js Normal file
View File

@ -0,0 +1,13 @@
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$("#back-to-top").addClass("show");
} else {
$("#back-to-top").removeClass("show");
}
});
$("#back-to-top").click(function () {
$("html, body").animate({ scrollTop: 0 }, "slow");
});
});