Merge pull request #121 from kumarishalini6/scrolltotop

scroll to top button

index.html

@@ -130,7 +130,16 @@
             <br>
             <p class="copyright">&copy Copyright <script>document.write(new Date().getFullYear())</script> |❤️Manan Kohli</a></p>
     </footer>
+    <a href="#" class="to-top">
+        <i class="fa fa-arrow-up" style="font-size:36px"></i>
+    </a>
+
+    <!---javascript links-->
+    <script src="./js/scroll.js"></script>
+
     </div>
+
+
 
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

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");
+    }
+
+})

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;
+}