diff --git a/index.html b/index.html index 728ee7a..6f34926 100644 --- a/index.html +++ b/index.html @@ -130,7 +130,16 @@
+ + + + + + + + + diff --git a/js/scroll.js b/js/scroll.js new file mode 100644 index 0000000..a5e387f --- /dev/null +++ b/js/scroll.js @@ -0,0 +1,13 @@ +const toTop = document.querySelector(".to-top"); + +window.addEventListener("scroll", () => +{ + if(window.pageYOffset > 100) { + toTop.classList.add("active"); + + } + else{ + toTop.classList.remove("active"); + } + +}) \ No newline at end of file diff --git a/main.css b/main.css index 2cb5a76..816b6ee 100644 --- a/main.css +++ b/main.css @@ -520,3 +520,35 @@ footer { color: white; letter-spacing: 1.5px; } + + +.to-top +{ + background-color: goldenrod; + position: fixed; + bottom: 16px; + right: 32px; + width: 60px; + height: 60px; + border-radius: 50% ; + display: flex; + align-items: center; + justify-content: center; + font-size: 32px; + color: #1f1f1f; + text-decoration: none; + opacity: 0; + pointer-events: none; + transition: all .4s; +} +.to-top:hover{ + color: goldenrod; + background-color: lightgray; +} + +.to-top.active +{ + bottom: 32px; + pointer-events: auto; + opacity: 1; +} \ No newline at end of file