adding scroll to top functionality for the activity feed

opentech/apply/funds/templates/funds/includes/activity-feed.html

@@ -26,4 +26,9 @@
             {% include "activity/include/all_activity_list.html" with submission_title=True %}
         </div>
     </div>
+
+    <a href="#" class="js-to-top link link--to-top">
+        <svg class="icon icon--to-top"><use xlink:href="#chevron"></use></svg>
+        <h6>Back to top</h6>
+    </a>
 </div>

opentech/static_src/src/javascript/main.js

@@ -47,6 +47,9 @@ import Tabs from './components/tabs';
             e.preventDefault();
             $('.js-activity-feed').removeClass('is-open');
         });
+
+        // Scroll to the top of the activity feed
+        $('.js-to-top').click(() => $('.js-activity-feed').animate({ scrollTop: 0 }, 250));
     });
 
     // Add active class to filters - dropdowns are dynamically appended to the dom,

opentech/static_src/src/sass/apply/components/_icon.scss

@@ -59,4 +59,17 @@
             margin-left: 10px;
         }
     }
+
+    &--to-top {
+        display: flex;
+        align-items: center;
+        width: 65px;
+        height: 65px;
+        padding: 20px;
+        margin: 0 0 5px;
+        background-color: $color--white;
+        border: 2px solid $color--black-50;
+        border-radius: 50%;
+        fill: $color--black-50;
+    }
 }

opentech/static_src/src/sass/apply/components/_link.scss

@@ -119,4 +119,14 @@
             }
         }
     }
+
+    &--to-top {
+        position: fixed;
+        right: 20px;
+        bottom: 20px;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        color: $color--black-50;
+    }
 }

opentech/templates/includes/sprites.html

@@ -211,7 +211,7 @@
             <path d="M8.176 13.833V2.167M8.303 14l4.991-4.714M8 14L3.009 9.286M13.824 19.5H2.176" />
         </g>
     </symbol>
-          
+
     <symbol id="wifi" viewBox="0 0 69 42">
         <g stroke-width="6" fill="none" fill-rule="evenodd">
             <path d="M2 16.365c20.786-17.82 42.253-17.82 64.402 0M15 27.842c12.195-10.456 24.79-10.456 37.785 0M27 39c4.666-4 9.484-4 14.456 0" />
@@ -273,4 +273,8 @@
     <symbol id="speech-bubble" viewBox="0 0 18 19">
         <path d="M8.573 16.715l-3.32 2.007a1 1 0 0 1-1.518-.856v-2.545A8.358 8.358 0 0 1 8.358 0H9.47a8.358 8.358 0 0 1 0 16.715h-.898z" fill-rule="evenodd"/>
     </symbol>
+
+    <symbol id="chevron" viewBox="0 0 23 12">
+        <path d="M11.5 0l-.975.824L0 9.737 1.95 12l9.55-8.089L21.05 12 23 9.737 12.475.824z" fill-rule="nonzero" />
+    </symbol>
 </svg>