Adjust back-to-top so it's hidden by default

alphagov · Jan 22, 2019 · d9cc3fe · d9cc3fe
1 parent 82f7b3e
commit d9cc3fe
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 17 deletions.
diff --git a/src/stylesheets/components/_back-to-top.scss b/src/stylesheets/components/_back-to-top.scss
@@ -1,15 +1,10 @@
-
 .app-back-to-top {
-  display: none;
-
   @supports (position: sticky) {
     display: inline-block;
-    position: -webkit-sticky; // sass-lint:disable-block no-duplicate-properties
     position: sticky;
     top: govuk-spacing(6);
     left: govuk-spacing(6);
     margin-bottom: govuk-spacing(6);
-    animation: fadeIn .2;
   }
 
   > svg {
@@ -20,16 +15,8 @@
   }
 }
 
-.app-back-to-top--hidden {
-  display: none;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
+@supports (position: sticky) {
+  .js-enabled .app-back-to-top--hidden {
+    display: none;
   }
 }
diff --git a/views/partials/_subnav.njk b/views/partials/_subnav.njk
@@ -32,7 +32,7 @@
     {% endfor %}
 </nav>
 
-<a id="app-back-to-top" class="app-back-to-top govuk-link govuk-link--no-visited-state" href="#top">
+<a id="app-back-to-top" class="app-back-to-top app-back-to-top--hidden govuk-link govuk-link--no-visited-state" href="#top">
   <svg class="app-c-back-to-top__icon" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17">
       <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path>
   </svg>Back to top