Merge pull request #116 from dimi-23/scroll_top

Scroll to Top feature added
OpenGenus · Mar 18, 2018 · 7e27825 · 7e27825
2 parents d82df1b + fe23b55
commit 7e27825
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 34 deletions.
diff --git a/code/css/popup.css b/code/css/popup.css
@@ -20,6 +20,7 @@ article {
     padding-bottom: 15%;
     margin: 0 auto;
 }
+
 footer {
     clear:both;
     position: fixed;
@@ -32,38 +33,32 @@ footer {
     background-color: #E5E8E8;    
 }
 
-    .favListItem {
-        text-align: center;
-    }
-
-    .sortbythis:hover
-    {
-        cursor: pointer;
-        background-color: #ffc10757;
-    }
+.favListItem {
+    text-align: center;
+}
 
-    #sortfavby{
-    background: none repeat scroll 0 0 #FFFFFF;
-    border: 1px solid #E5E5E5;
-    border-radius: 5px 5px 5px 5px;
-    box-shadow: 0 0 10px #E8E8E8 inset;
-    height: 40px;
-    margin: 0 0 0 25px;
-    padding: 10px;
-    min-width: 120px;
-    }
+.sortbythis:hover
+{
+    cursor: pointer;
+    background-color: #ffc10757;
+}
 
-    #favSearchInputBox
-    {
-        text-align: center;
-        float:center; 
-    }
+#sortfavby{
+background: none repeat scroll 0 0 #FFFFFF;
+border: 1px solid #E5E5E5;
+border-radius: 5px 5px 5px 5px;
+box-shadow: 0 0 10px #E8E8E8 inset;
+height: 40px;
+margin: 0 0 0 25px;
+padding: 10px;
+min-width: 120px;
+}
 
-/*
-li {
-    padding-left: 40px;
+#favSearchInputBox
+{
+    text-align: center;
+    float:center; 
 }
-*/
 
 .navbar-brand {
     padding: 0px;
@@ -206,9 +201,29 @@ ul.share-buttons .sr-only{
   overflow: hidden;
 }
 
+#scrollBtn {
+    display: none;
+    position: fixed;
+    bottom: 70px;
+    right: 30px;
+    z-index: 99;
+    border: none;
+    outline: none;
+    background-color: #818182;
+    color: white;
+    cursor: pointer;
+    padding: 15px;
+    border-radius: 50px;
+    width: 45px;
+}
+
+#scrollBtn:hover {
+  background-color: #555;
+}
+
 #share-buttons img {
-width: 35px;
-padding: 5px;
+  width: 35px;
+  padding: 5px;
 }
 
 #share-footer{

diff --git a/code/js/popup.js b/code/js/popup.js
diff --git a/code/popup.html b/code/popup.html
@@ -23,6 +23,7 @@
   <link rel="stylesheet" type="text/css" href="css/font.css">
   <link rel="stylesheet" type="text/css" href="css/fontawesome-all.min.css">
   <link rel="shortcut icon" type="image/png" href="/icon/icon.png"/>
+
   <title>OpenGenus: World's first Offline Search Engine</title>
   <meta charset='utf-8'>
 </head>
@@ -111,6 +112,8 @@ <h1 style="text-align: center;">World's first Offline Search Engine</h1>
 
     <div id="favorites"></div> 
 
+    <button id="scrollBtn" class="fa fa-angle-up" title="Go to top"></button>
+
     <footer class="footer">
         <div class="container">
               <span class="text-muted float-left">Built with ❤ @<a target="_blank" title="Works only when you are online" href="https://github.com/OpenGenus/">OpenGenus</a>