Merge pull request #130 from sriharsha0x1/ScrollUp

Scroll up #120

index.html

@@ -59,7 +59,11 @@
             </button>
         </div>
     </div>
-    <button class="top" id="top" onclick="topFunction()"><img src="website/web_images/top.png" alt=""></button>
+    <button class="go-top-btn">
+        <img src="website/web_images/arrow.png" alt="arrow up">
+      </button>
+
+
     <nav id="navbar">
         <img src="website/web_images/3dlogo.svg" alt="Dataverse Logo" class="logo" id="normal">
         <img src="website/web_images/3d_glow.png" alt="Dataverse Logo" class="logo" id="glow">

website/script.js

@@ -8,10 +8,25 @@ window.addEventListener("load",function(e){
     displayCopyright();
 });
 
-function topFunction() {
-    document.body.scrollTop = 0;
-    document.documentElement.scrollTop = 0;
+const goTopBtn = document.querySelector('.go-top-btn');
+
+window.addEventListener('scroll', checkHeight)
+
+function checkHeight(){
+  if(window.scrollY > 200) {
+    goTopBtn.style.display = "flex"
+  } else {
+    goTopBtn.style.display = "none"
+  }
 }
+
+goTopBtn.addEventListener('click', () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  })
+})
+
 function changeCss() {
     var top = document.getElementById("top");
     var scroll_icon = document.getElementById("scroll_icon");

website/style.css

@@ -370,28 +370,27 @@ footer {
     color: white;
 }
 
-.top {
-    background-color: #3333337b;
-    padding: 10px 7px 10px 7px;
-    border: none;
-    border-radius: 10px;
+.go-top-btn {
     position: fixed;
-    bottom: 10px;
-    right: 10px;
-    backdrop-filter: blur(7px);
-    box-shadow: 5px 5px 10px black;
-    z-index: 50;
-
-}
-
-#top {
-    opacity: 0;
-    transition-duration: 0.3s;
-}
+    bottom: 35px;
+    right: 35px;
+    border-radius: 50%;
+    cursor: pointer;
+    height: 65px;
+    width: 65px;
+    background: #fff;
+    border: 3px solid #333;
+    display: none;
+    justify-content: center;
+    z-index: 1000; 
+    align-items: center;
+  }
+
+  .go-top-btn img {
+    width: 50px;
+    height: 50px;
+  }
 
-.top img {
-    height: 20px;
-}
 
 #navbar {
     width: 100vw;