Add focus for table of contents jump links

Author: donnieberg

demo/pages/HomePage/ButtonGroupSection.jsx

@@ -37,8 +37,10 @@ module.exports = React.createClass( {
     return (
 
             <div className='slds-p-around--medium'>
-              <h3 id='buttonGroupSection' className='slds-text-heading--medium slds-truncate'>
-                Button Group
+              <h3 className='slds-text-heading--medium slds-truncate'>
+                <a href="javascript:void(0)" id='buttonGroupSection'>
+                  Button Group
+                </a>
               </h3>
 
               <PrismCode className='language-markup'>

demo/pages/HomePage/ButtonSection.jsx

@@ -45,8 +45,10 @@ module.exports = React.createClass( {
     return (
 
       <div className="slds-p-around--medium">
-        <h3 id="buttonSection" className="slds-text-heading--medium slds-truncate">
+        <h3 className="slds-text-heading--medium slds-truncate">
+          <a href="javascript:void(0)" id="buttonSection">
           Button
+          </a>
         </h3>
 
         <PrismCode className="language-markup">

demo/pages/HomePage/ButtonSectionREADME.jsx

@@ -37,8 +37,10 @@ module.exports = React.createClass( {
 
             <div className="slds-p-around--medium">
 
-              <h3 id='datepickerSection' className="slds-text-heading--medium slds-truncate">
+              <h3 className="slds-text-heading--medium slds-truncate">
+                <a href="javascript:void(0)" id='datepickerSection'>
                 Datepickers (Work in progress)
+                </a>
               </h3>
 
               <PrismCode className='language-markup'>

demo/pages/HomePage/DatePickerSingleSelectSection.jsx

@@ -43,8 +43,10 @@ module.exports = React.createClass( {
 
 
             <div className="slds-p-around--medium">
-              <h3 id='dropdownSection' className="slds-text-heading--medium slds-truncate">
+              <h3 className="slds-text-heading--medium slds-truncate">
+                <a href="javascript:void(0)" id='dropdownSection'>
                 Dropdown Base
+                </a>
               </h3>
 
               <PrismCode className='language-markup'>

demo/pages/HomePage/DropdownBaseSection.jsx

@@ -39,8 +39,10 @@ module.exports = React.createClass( {
     return (
 
             <div className='slds-p-around--medium'>
-              <h3 id='iconSection' className='slds-text-heading--medium slds-truncate'>
+              <h3 className='slds-text-heading--medium slds-truncate'>
+                <a href="javascript:void(0)" id='iconSection'>
                 Icon
+                </a>
               </h3>
               <PrismCode className='language-markup'>
                 {require('raw-loader!../../code-snippets/SLDSIcon.txt')}

demo/pages/HomePage/IconSection.jsx

@@ -61,8 +61,10 @@ module.exports = React.createClass( {
 
             <div className="slds-p-around--medium">
 
-              <h3 id='lookupSection' className="slds-text-heading--medium slds-truncate">
+              <h3 className="slds-text-heading--medium slds-truncate">
+                <a href="javascript:void(0)" id='lookupSection'>
                 Lookups
+                </a>
               </h3>
 
               <PrismCode className='language-markup'>

demo/pages/HomePage/LookupBaseSection.jsx

@@ -138,8 +138,10 @@ module.exports = React.createClass( {
     return (
       <div className='slds-p-around--medium'>
 
-      <h3 id='modalSection' className='slds-text-heading--medium slds-truncate'>
-      Modal
+      <h3 className='slds-text-heading--medium slds-truncate'>
+        <a href="javascript:void(0)" id='modalSection'>
+        Modal
+        </a>
       </h3>
       <PrismCode className='language-markup'>
         {require("raw-loader!../../code-snippets/SLDSModal.txt")}

demo/pages/HomePage/ModalSection.jsx

@@ -84,8 +84,10 @@ module.exports = React.createClass( {
     return (
 
       <div className='slds-p-around--medium'>
-        <h3 id='notificationSection' className='slds-text-heading--medium slds-truncate'>
+        <h3 className='slds-text-heading--medium slds-truncate'>
+          <a href="javascript:void(0)" id='notificationSection'>
           Notification
+          </a>
         </h3>
         <h4>
           * All notifications are fixed and centered at the top of the screen.

demo/pages/HomePage/NotificationSection.jsx

@@ -46,8 +46,10 @@ module.exports = React.createClass( {
 
             <div className="slds-p-around--medium">
 
-              <h3 id='picklistSection' className="slds-text-heading--medium slds-truncate">
+              <h3 className="slds-text-heading--medium slds-truncate">
+                <a href="javascript:void(0)" id='picklistSection'>
                 Picklist Base
+                </a>
               </h3>
 
               <PrismCode className='language-markup'>

demo/pages/HomePage/PicklistBaseSection.jsx

@@ -61,8 +61,10 @@ module.exports = React.createClass( {
 
 
             <div className="slds-p-around--medium">
-              <h3 id='tooltipSection' className="slds-text-heading--medium slds-truncate">
+              <h3 className="slds-text-heading--medium slds-truncate">
+                <a href="javascript:void(0)" id='tooltipSection'>
                 Tooltip
+                </a>
               </h3>
 {/*
               <PrismCode className='language-markup'>

demo/pages/HomePage/TooltipSection.jsx

@@ -16,7 +16,6 @@ const { Route, DefaultRoute, RouteHandler, Link } = Router;
 import SLDSGrid from '../../../components/SLDSGrid';
 import {ButtonIcon, Icon} from "./../../../components/SLDSIcons";
 
-import ButtonSectionREADME from './ButtonSectionREADME';
 import ButtonSection from './ButtonSection';
 import ButtonGroupSection from './ButtonGroupSection';
 
@@ -73,8 +72,8 @@ module.exports = React.createClass( {
     let that = this;
     return function() {
       var target = document.getElementById(elemId);
-      console.log(target);
       that.animate(document.body, "scrollTop", "", 0, target.offsetTop, 500, true);
+      target.focus();
     };
   },