Merge pull request #157 from multiverseweb/revert-130-ScrollUp

Revert "Scroll up #120"

index.html

@@ -59,11 +59,7 @@
             </button>
         </div>
     </div>
-    <button class="go-top-btn">
-        <img src="website/web_images/arrow.png" alt="arrow up">
-      </button>
-
-
+    <button class="top" id="top" onclick="topFunction()"><img src="website/web_images/top.png" alt=""></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,25 +8,10 @@ window.addEventListener("load",function(e){
     displayCopyright();
 });
 
-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"
-  }
+function topFunction() {
+    document.body.scrollTop = 0;
+    document.documentElement.scrollTop = 0;
 }
-
-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,27 +370,28 @@ footer {
     color: white;
 }
 
-.go-top-btn {
+.top {
+    background-color: #3333337b;
+    padding: 10px 7px 10px 7px;
+    border: none;
+    border-radius: 10px;
     position: fixed;
-    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;
-  }
+    bottom: 10px;
+    right: 10px;
+    backdrop-filter: blur(7px);
+    box-shadow: 5px 5px 10px black;
+    z-index: 50;
 
+}
+
+#top {
+    opacity: 0;
+    transition-duration: 0.3s;
+}
+
+.top img {
+    height: 20px;
+}
 
 #navbar {
     width: 100vw;