back to top button
This commit is contained in:
parent
fd46e1aaba
commit
c214b6d7e2
@ -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) {
|
||||
|
@ -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
13
js/back-to-top.js
Normal 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");
|
||||
});
|
||||
});
|
Loading…
x
Reference in New Issue
Block a user