diff --git a/css/main.css b/css/main.css index b5bd057..6249158 100644 --- a/css/main.css +++ b/css/main.css @@ -210,6 +210,12 @@ textarea { text-align: left; } + @media (prefers-reduced-motion: no-preference) { + html { + scroll-behavior: smooth; + } +} + /* Setting margins to zero to remove all browser default margins */ h1, @@ -337,6 +343,27 @@ textarea { width: 100%; } + #backToTopBtn { + display: none; + position: fixed; + bottom: 20px; + right: 30px; + z-index: 99; + font-size: 18px; + border: none; + outline: none; + background-color: #f4bedc; + color: #351d77; + cursor: pointer; + padding: 15px; + border-radius: 4px; + } + + #backToTopBtn:hover { + background-color: #eC91c4; + color: white; + } + /* -----Mobile Styles ----- */ /* Portfolio */ diff --git a/index.html b/index.html index 8c57dc5..ceda357 100644 --- a/index.html +++ b/index.html @@ -41,6 +41,7 @@

Hi! I'm Shanna Walsh!

I'm a Full Stack Developer and Air Force veteran with an insatiable curiosity for understanding how things work.

+
@@ -188,11 +189,11 @@

Meet me

Let's chat code and have a cup of coffee or meet on zoom!

-

Copyright | Shanna Walsh

+

© | Shanna Walsh

- + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..1676372 --- /dev/null +++ b/js/script.js @@ -0,0 +1,30 @@ +// Select the button: +const backToTopButton = document.getElementById("backToTopBtn"); + +// When the user scrolls down 20px from the top of the document, show the button +window.onscroll = function() {scrollFunction()}; + +function scrollFunction() { + if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { + backToTopButton.style.display = "block"; + } else { + backToTopButton.style.display = "none"; + } +} + +// When the user clicks on the button, scroll to the top of the document +function topFunction() { + document.body.scrollTop = 0; // For Safari + document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera +} + +// Select the Copyright element: +let currentYearElement = document.getElementById("currentYear"); + +// Get the current year +//let currentDate = new Date(); +let currentYear = (new Date().getFullYear()); + +// Update the date in the Copyright element +currentYearElement.innerText = currentYear; +