Merge pull request #1357 from Lovegupta112/scrollbar

TusharKesarwani · web-flow · commit 7c6dade0a661 · 2023-06-20T18:14:34.000+05:30
added scrollbar button
diff --git a/index.html b/index.html
@@ -21,6 +21,12 @@
 
 <body onload="myfunction()">
     <div id="load"></div>
+
+    <!-- scrollbar button -->
+    <div id="progress">
+        <i id="progress-value" class="fas fa-arrow-up"></i>
+    </div>
+    
     <!-- Navigation Section -->
     <nav>
         <div>
diff --git a/script.js b/script.js
@@ -101,3 +101,34 @@ fetch("https://api.github.com/repos/TusharKesarwani/Front-End-Projects/contribut
             contributorsList.appendChild(li);
         });
     });
+
+       //-----------for scrollbar button---------------
+
+
+       function calculateScrollValue(){
+
+        let scrollProgress=document.getElementById('progress');
+        let progressValue=document.getElementById('progress-value');
+
+        let pos=document.documentElement.scrollTop;
+        let calcHeight=document.documentElement.scrollHeight-document.documentElement.clientHeight;
+
+        let scrollValue=Math.round((pos*100)/calcHeight);
+
+        // for hiding scrollbar button
+        if(pos>100){
+            scrollProgress.style.display='grid';
+        }
+        else{
+            scrollProgress.style.display='none';
+        }
+
+
+        scrollProgress.addEventListener('click',()=>{
+            document.documentElement.scrollTop=0;
+        })
+       scrollProgress.style.background=`conic-gradient(#0D4360 ${scrollValue}%, #d7d7d7 ${scrollValue}%)`;
+      
+    }
+    window.onscroll=calculateScrollValue;
+    window.onload=calculateScrollValue;
diff --git a/style.css b/style.css
@@ -15,6 +15,31 @@ body {
     background-color: white;
 }
 
+#progress{
+    cursor: pointer;
+    position:fixed;
+    right:10px;
+    bottom:20px;
+    width:60px;
+    height:60px;
+    z-index:111111;
+    display:none;
+    place-items: center;
+    border-radius:50%;
+    box-shadow:0 0 10px rgba(0, 0, 0,0.5);
+}
+#progress #progress-value{
+    display:block;
+    width:calc(100% - 10px);
+    height:calc(100% - 10px);
+    background-color:white;
+    border-radius:50%;
+    display:grid;
+    place-items: center;
+    font-size:25px;
+    color:#001a2e;
+}
+
 nav {
     display: flex;
     justify-content: space-between;
