git# This is a combination of 2 commits.

Refactoring footer-button and removing jQuery

cfgov/jinja2/v1/_includes/organisms/footer.html

@@ -21,10 +21,10 @@
 
             <a class="btn
                       btn__secondary
-                      js-return-to-top
                       o-footer_top-button"
-               href="#">
-                Back to top <span class="cf-icon cf-icon-arrow-up"></span>
+                data-js-hook="behavior_return-to-top"
+                href="#">
+                Back to top <span clasbs="cf-icon cf-icon-arrow-up"></span>
             </a>
 
             <ul class="o-footer_nav-list">

cfgov/unprocessed/js/modules/footer-button.js

@@ -1,26 +1,64 @@
 /* ==========================================================================
    Footer Button: Scroll to Top
+
+   Code copied from the following with minimal modifications :
+
+   - http://stackoverflow.com/questions/21474678/
+     scrolltop-animation-without-jquery
    ========================================================================== */
+
 'use strict';
 
-var $ = require( 'jquery' );
+// Required modules.
+var dataHook = require( './util/data-hook' );
 
-// TODO: Refactor this file to remove jquery dependency.
-//       http://stackoverflow.com/questions/21474678/
-//       scrolltop-animation-without-jquery
 /**
  * Set up event handler for button to scroll to top of page.
  */
 function init() {
-  var duration = 300;
+  var scrollDuration = 300;
+  var behaviorElement = dataHook.get( 'return-to-top' );
 
-  // Disable Google Tag Manager tracking on this link.
-  $( '.js-return-to-top' ).attr( 'data-gtm_ignore', 'true' );
+  if ( behaviorElement === null ||
+       'requestAnimationFrame' in window === false ) {
+    return;
+  }
 
-  $( '.js-return-to-top' ).click( function( event ) {
+  // Disable Google Tag Manager tracking on this link.
+  behaviorElement.setAttribute( 'data-gtm_ignore', 'true' );
+  behaviorElement.addEventListener( 'click', function( event ) {
     event.preventDefault();
-    $( 'html, body' ).animate( { scrollTop: 0 }, duration );
+    _scrollToTop( scrollDuration );
   } );
 }
 
+/**
+ * @param {integer} scrollDuration
+ *  Duration of the scroll to top of the page.
+ */
+function _scrollToTop( scrollDuration ) {
+  var scrollHeight = window.scrollY;
+  var scrollStep = Math.PI / ( scrollDuration / 15 );
+  var cosParameter = scrollHeight / 2;
+  var scrollCount = 0;
+  var scrollMargin;
+  requestAnimationFrame( _step );
+
+  /**
+   * Decrement scroll Y position.
+   */
+  function _step() {
+    setTimeout( function() {
+      if ( window.scrollY !== 0 ) {
+        requestAnimationFrame( _step );
+        scrollCount += 1;
+        scrollMargin = cosParameter - cosParameter *
+                       Math.cos( scrollCount * scrollStep );
+        window.scrollTo( 0, scrollHeight - scrollMargin );
+      }
+    }, 15 );
+  }
+
+}
+
 module.exports = { init: init };

cfgov/unprocessed/js/modules/util/data-hook.js

@@ -60,8 +60,22 @@ function contains( element, value ) {
   return values.indexOf( value ) > -1 ? true : false;
 }
 
+/**
+ * @param {string} behavior
+ *  Behavior type used to find the element within the dom.
+ * @returns {HTMLNode} if it exists in the dom, null otherwise.
+ */
+function get( behavior ) {
+  var behaviorSelector =
+  standardType.JS_HOOK + '*=' + standardType.BEHAVIOR_PREFIX + behavior;
+  var behaviorElement = document.querySelector( '[' + behaviorSelector + ']' );
+
+  return behaviorElement;
+}
+
 module.exports = {
   add:      add,
   contains: contains,
+  get:      get,
   remove:   remove
 };