fix back to top arrow- position:fixed- ignored in Chrome & Firefox

pulibrary · Mar 7, 2019 · 893081e · 893081e
1 parent 6e6aab5
commit 893081e
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 3 deletions.
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -25,6 +25,7 @@
 //= require universal_viewer
 //= require pom_boot
 //= require more_link
+//= require back_to_top
 
 Blacklight.onLoad(function() {
   Initializer = require('pom_boot')

diff --git a/app/assets/javascripts/back_to_top.js b/app/assets/javascripts/back_to_top.js
@@ -0,0 +1,14 @@
+$(document).ready(function() {
+    $(window).scroll(function(){
+        if ($(this).scrollTop() > 100) {
+            $('.back-to-top').fadeIn();
+        } else {
+            $('.back-to-top').fadeOut();
+        }
+    });
+
+    $('.back-to-top').click(function(){
+        $('html, body').animate({scrollTop : 0},800);
+        return false;
+    });
+});
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -162,7 +162,6 @@ li[dir=rtl] {
     // transform:perspective(800px) rotateY(-180deg);
   }
 }
-body { -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; }
 
 .card-backing {
   box-shadow: $exhibit-card-shadow;

diff --git a/app/assets/stylesheets/footer.scss b/app/assets/stylesheets/footer.scss
@@ -121,5 +121,31 @@
 }
 
 .back-to-top {
-  line-height: 1.75em;
+    background: image-url("up-arrow.svg") center 50% no-repeat rgba(255,255,255,.8);
+    bottom: 30px;
+    display: none;
+    height: 40px;
+    overflow: hidden;
+    position: fixed;
+    right: 10px;
+    text-decoration: none;
+    text-indent: 100%;
+    white-space: nowrap;
+    width: 40px;
+
+    @media only screen and (min-width: 768px) {
+      bottom: 20px;
+      right: 20px;
+    }
+
+    @media only screen and (min-width: 1024px) {
+      bottom: 30px;
+      height: 60px;
+      right: 30px;
+      width: 60px;
+    }
+
+  &:hover{
+    text-decoration: none;
+  }
 }
diff --git a/app/views/shared/_footer.html.erb b/app/views/shared/_footer.html.erb
@@ -125,5 +125,5 @@
       </div>
     </div>
   </div>
-  <a href="#l-page" class="back-to-top">Top</a>
+  <a href="#l-page" class="back-to-top"></a>
 </footer>