fix(styleguide): Scroll to correct position from top level nav

[#80392096]

Signed-off-by: Nicole Sullivan <nsullivan@pivotal.io>

hologram/doc_assets/_header.html

@@ -25,9 +25,9 @@
                 <% @pages[file_name][:blocks].each do |b| %>
                   <% if (b[:categories].include?(category_name)) && (b[:parent] == nil) %>
                     <% if file_name == @file_name %>
-                      <li><a href="?target=<%= b[:name] %>" class="styleguide-subsection"><%= b[:title] %></a></li>
+                      <li><a href="#<%= b[:name] %>" class="styleguide-subsection"><%= b[:title] %></a></li>
                     <% else %>
-                      <li><a href="<%= file_name %>?target=<%= b[:name] %>"><%= b[:title] %></a></li>
+                      <li><a href="<%= file_name %>#<%= b[:name] %>"><%= b[:title] %></a></li>
                     <% end %>
                   <% end %>
                 <% end %>
@@ -38,6 +38,6 @@
         </ul>
       </div>
     </nav>
-    <div class="container mtxxl ptl">
+    <div class="container ptl">
       <section class="content">
 

src/style_guide/style_guide.js

@@ -1,10 +1,3 @@
-// jquery plugin from: http://css-tricks.com/snippets/jquery/get-query-params-object/
-jQuery.extend({
-  getQueryParameters : function(str) {
-    return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
-  }
-});
-
 /* Stylesheet swappin */
 $(document).ready(function(){
   $('input.alternate-css').change(function() {
@@ -19,15 +12,12 @@ $(document).ready(function(){
 });
 
 /* Adjust scrollTop when navigating to a subsection on the current page */
+
 $(document).ready(function() {
-  var headerHeight = 50;
   $('a.styleguide-subsection').on('click', function(e) {
-    var queryString = e.target.href.slice(e.target.href.indexOf('?'));
-    window.history.pushState('', '', queryString);
-    e.preventDefault();
-
-    var $target = $('#' + $.getQueryParameters(queryString).target);
-    var desiredScrollPosition = $target.offset().top - headerHeight;
+    var $target = $(e.target.hash);
+    var desiredScrollPosition = $target.offset().top;
+    window.history.pushState('', '', e.target.hash);
     $('body, html').animate({
       scrollTop: desiredScrollPosition
     }, 500, function () {
@@ -36,13 +26,3 @@ $(document).ready(function() {
     return false;
   });
 });
-
-/* Adjust scrollTop when navigating to a subsection on a different page */
-$(document).ready (function() {
-  if ($.getQueryParameters().target) {
-    $target = $('#' + $.getQueryParameters().target);
-    var newScrollTop = $target.offset().top - 50;
-    $(window).scrollTop(newScrollTop);
-  }
-});
-

src/style_guide/style_guide.scss

@@ -34,6 +34,8 @@ h5.styleguide,
 h6.styleguide {
   color: $brand-3;
   font-weight: 600;
+  margin-top: 0;
+  padding-top: 50px;
 }
 
 h1.styleguide {
@@ -258,6 +260,7 @@ table.styleguide {
   padding: 7px;
   border: 1px solid #ccc;
   width: 100%;
+  margin-bottom: 12px;
 
   tr, th, td {
     padding: 7px;