From c214b6d7e24be8f9938f5fc2f67e46395d2ab82c Mon Sep 17 00:00:00 2001 From: Gary Date: Wed, 17 Sep 2025 20:51:17 -0700 Subject: [PATCH] back to top button --- css/styles.css | 17 ++++++++++++++++- index.html | 3 +++ js/back-to-top.js | 13 +++++++++++++ 3 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 js/back-to-top.js diff --git a/css/styles.css b/css/styles.css index f5ed6a1..92a7a6e 100644 --- a/css/styles.css +++ b/css/styles.css @@ -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) { diff --git a/index.html b/index.html index 503f99c..3b2ddd7 100644 --- a/index.html +++ b/index.html @@ -48,6 +48,7 @@ + @@ -297,6 +298,8 @@ + + diff --git a/js/back-to-top.js b/js/back-to-top.js new file mode 100644 index 0000000..3401b89 --- /dev/null +++ b/js/back-to-top.js @@ -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"); + }); +});