Merge pull request #48 from Anikalp1/branch

added scroll to top button

index.html

@@ -486,7 +486,9 @@ <h3>Sean Parker</h3>
             <i class="fa fa-quote-left"> </i>
 
             <p>
-
+              Lorem Ipsum is Simply dummy Text Of Printing and typesetting
+              industry . Loren Ipsum has been the Industry's Standard Dummy Text
+              Over
             </p>
             <div class="ratings">
               <i class="fa fa-star"> ⭐ </i>
@@ -606,6 +608,11 @@ <h3>Follow Us</h3>
         </div>
       </div>
     </div>
+    <button type="button" class="btn btn-danger btn-floating btn-lg" id="btn-back-to-top">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" fill="black" class="bi bi-arrow-up" viewBox="0 0 16 16">
+        <path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z"/>
+      </svg>
+    </button>
     <!--------------js for toggle menu---------->
     <script>
       var MenuItems = document.getElementById(MenuItems);
@@ -619,5 +626,27 @@ <h3>Follow Us</h3>
         }
       }
     </script>
+    <script>
+let mybutton = document.getElementById("btn-back-to-top");
+window.onscroll = function () {
+scrollFunction();
+};
+
+function scrollFunction() {
+if (
+document.body.scrollTop > 20 ||
+document.documentElement.scrollTop > 20
+) {
+mybutton.style.display = "block";
+} else {
+mybutton.style.display = "none";
+}
+}
+mybutton.addEventListener("click", backToTop);
+function backToTop() {
+document.body.scrollTop = 0;
+document.documentElement.scrollTop = 0;
+}
+    </script>
   </body>
 </html>

style.css

@@ -279,6 +279,12 @@ ul{
 .copyright{
     text-align: center;
 }
+ #btn-back-to-top {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        display: none;
+        }
 .menu-icon{
     width: 28px;
     margin-left: 20px;
@@ -312,6 +318,7 @@ ul{
         display: block;
         cursor: pointer;
     }
+
 }
 /*-----media query foe less than 600 screen size---*/
 @media only screen and(max-width: 600px){