Merge pull request #377 from Sneha123-zudo/scroll

Done the changes in faq page

faq/faq.css

@@ -103,3 +103,34 @@ a:hover {
         text-align: center;
     }
 }
+
+#progress{
+    background-color: white;
+    position: fixed;
+    bottom: 20px;
+    right: 10px;
+    height: 60px;
+    width: 60px;
+    display: none;
+    place-items: center;
+    border-radius: 50%;
+    box-shadow: 0 0 10px rgba(0 , 0 , 0 , 0.2);
+    cursor: pointer;
+
+  }
+  #progress-value{
+    display: block;
+    height: calc(100% - 15px);
+    width: calc(100% - 15px);
+    background-color: #4caf50;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    font-size: 25px;
+    font-weight: 700;
+    /* color: #001a2e; */
+    color: white;
+  }
+  html{
+    overflow-x: hidden;
+  }

faq/faq.html

@@ -84,6 +84,10 @@ <h1>Contact Us</h1>
             <p>Privacy Policy | Terms of Use</p>
         </div>
     </footer>
+    <div id="progress">
+        <span id="progress-value">&#x1F815; </span>
+      </div>
+      <script src="scroll.js"></script>
     <script src="faq.js"></script>
     <script>
         //javascript for heading typing effect

faq/scroll.js

@@ -0,0 +1,20 @@
+let calcScrollValue = () => {
+    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);
+if(pos>100){
+    scrollProgress.style.display = "grid";
+}
+else{
+    scrollProgress.style.display = "none";
+}
+scrollProgress.addEventListener("click", () => {
+document.documentElement.scrollTop = 0;
+});
+scrollProgress.style.background = 'conic-gradient((white ${scrollValue}%, #d7d7d7 ${scrollValue}%)';
+};
+
+window.onscroll = calcScrollValue;
+window.onload = calcScrollValue;