scroll down to content, when clicking on header

js/customElements/header.js

@@ -7,7 +7,7 @@ class Header extends HTMLElement {
                 <div class="header-wrapper" >
                     <div class="header-homepage">
                         <div class="align-holder" >
-                            <h1>${pageTitle}</h1 >
+                            <a class="noStyleLink" href="#hideHeader"><h1>${pageTitle}</h1 ></h1>
                         </div >
                     </div >
                     <div class="header-separator header-separator-bottom " >
@@ -16,6 +16,7 @@ class Header extends HTMLElement {
                 </div >
                 <jl-main_menu id = "mainMenu"></jl-main_menu>
             </header>
+            <span id="hideHeader"></span>
         `;
     }
 }

scss/_general.scss

-body {
-  margin: 0;
-  background-color: $back-color-2;
-  color: $text-color;
-  font-family: 'Source Sans Pro', sans-serif;
-
-  width: calc(100% - 1px);
-  height: 100%;
+html {
+    scroll-behavior: smooth;
 }
 
-button{
-  background-color: $accent-color;
-  color: #fff;
-  text-transform: uppercase;
-  border: 0;
-  padding: 5px;
-  cursor: pointer;
-  border-radius: 5px;
-  transition: background-color $link-hover-animation-time linear;
+body {
+    margin: 0;
+    background-color: $back-color-2;
+    color: $text-color;
+    font-family: 'Source Sans Pro', sans-serif;
+    width: calc(100% - 1px);
+    height: 100%;
+}
 
-  &:hover, &:active, &:focus {
-    background-color: $accent-color-2;
-    outline: none;
-  }
+button {
+    background-color: $accent-color;
+    color: #fff;
+    text-transform: uppercase;
+    border: 0;
+    padding: 5px;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background-color $link-hover-animation-time linear;
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: $accent-color-2;
+        outline: none;
+    }
 }
 
-.spacer{
-  clear: both;
+.spacer {
+    clear: both;
 }
 
-a{
-  padding: 0;
-  color: $accent-color;
-  text-decoration:underline;
-  transition: color $link-hover-animation-time;
+a {
+    padding: 0;
+    color: $accent-color;
+    text-decoration: underline;
+    transition: color $link-hover-animation-time;
+    &:HOVER {
+        color: $accent-color-2;
+    }
+}
 
-  &:HOVER{
-    color: $accent-color-2;
-  }
+.noStyleLink {
+    text-decoration: none;
 }
 
 h1 {
-  color: $title-color;
-  text-transform: uppercase;
+    color: $title-color;
+    text-transform: uppercase;
 }
 
 .red {
-  color: red;
+    color: red;
 }
 
-.center{
-  text-align: center;
+.center {
+    text-align: center;
 }
-.left{
-  text-align: left;
+
+.left {
+    text-align: left;
 }
-.right{
-  text-align: left;
+
+.right {
+    text-align: left;
 }
 
-.block{
-  text-align: justify;
-  text-justify: auto;
+.block {
+    text-align: justify;
+    text-justify: auto;
 }
 
 img {
-  border-radius: $border-radius-image;
-
-  &.no-corner {
-    border-radius: 0;
-  }
+    border-radius: $border-radius-image;
+    &.no-corner {
+        border-radius: 0;
+    }
 }
\ No newline at end of file