Merge pull request #114 from sul-dlss/make_learn_more_link_scroll_dow…

…n_the_homepage

make learn more link scroll down the homepage

app/assets/javascripts/home_page_interactions.js

@@ -0,0 +1,40 @@
+$(document).on('ready', function(){
+  if ($('body').hasClass('pages-show')) {
+    // Select all links with hashes
+    $('a[href*="#"]')
+    // deselect links that don't actually link to anything
+      .not('[href="#"]')
+      .not('[href="#0"]')
+      .click(function(event) {
+        // On-page links
+        if (
+          location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
+            && 
+            location.hostname == this.hostname
+        ) {
+          // Figure out element to scroll to
+          var target = $(this.hash);
+          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+          // Does a scroll target exist?
+          if (target.length) {
+            // Only prevent default if animation is actually gonna happen
+            event.preventDefault();
+            $('html, body').animate({
+              scrollTop: target.offset().top
+            }, 400, function() {
+              // Callback after animation
+              // Must change focus!
+              var $target = $(target);
+              $target.focus();
+              if ($target.is(":focus")) { // Checking if the target was focused
+                return false;
+              } else {
+                $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
+                $target.focus(); // Set focus again
+              };
+            });
+          }
+        }
+      });
+  }
+});

app/views/pages/home.html.erb

@@ -4,7 +4,7 @@
       <%= image_tag 'mirador-logo.png' %>
       <h2 class='brand'><%= t(:application_name) %></h2>
       <p>Discover. Compare. Zoom. Annotate. Share.</p>
-      <%= link_to 'Learn more', page_path('about-iiif'), class: 'btn btn-lg btn-outline-secondary' %>
+      <a href='#about' class="btn btn-lg btn-outline-secondary">Learn More</a>
     </div>
   </div>
   <video class='masthead-video' autoplay muted loop>