Merge pull request #146 from GSA/bugfix/144_faq_sidenav

Ticket 144: Fixing the side navbar in FAQ

Author: BuckinghamAJ

src/app/help/faq/faq.component.html

@@ -82,7 +82,7 @@ <h1>Frequently Asked Questions</h1>
         <div class="col-md-9 nopadding">
           <div class="faq-right-content">
             <div class="search-title" *ngFor="let section of faq;">
-              <h2 id="{{section.title}}">{{section.name}}</h2>
+              <h2 class="search-title-header" id="{{section.title}}">{{section.name}}</h2>
               <div class="panel-group"  *ngIf="section.children">
                 <div id="{{section.id}}" class="accordion panel panel-default search-content" *ngFor="let element of section.children; let i = index">
                   <div class="accordion-item panel-heading">

src/app/help/faq/faq.component.scss

@@ -39,6 +39,10 @@ height: 45px;
 text-align: center;
 }
 
+.search-title-header {
+  scroll-margin-top: 3em;
+}
+
 .no-padding {
   padding: 0px !important;
   margin: 0px !important;
@@ -50,7 +54,7 @@ text-align: center;
 }
 
 .panel-group {
-  margin-bottom: 40px;
+  margin-bottom: 3em;
 }
 
 .panel-heading button{

src/app/help/faq/faq.component.ts

@@ -79,11 +79,13 @@ export class FaqComponent extends BaseComponent implements OnInit {
    * window scroll to selected ID
    * @param ID
    */
-  scroll(ID) {
+  scroll(ID: string) {
     const element = document.getElementById(ID);
-    $('html, body').animate({
-      scrollTop: $(element).offset().top - 80
-    });
+    if (element) {
+      element.scrollIntoView({
+        behavior: 'smooth'
+      })
+    }
   }
 
   /**