title: Smooth Scroll Up and Down to Multiple Anchors
body: <p>I am new to Web Dev and I want to make a website that can scroll-up and down-to multiple anchors using the side navigation bar.</p>
  
  <p>This is my html code,</p>
  
  <pre><code>&lt;body&gt;
   &lt;div id="mySideDiv" class="divAnimate"&gt;
    &lt;p id="head"&gt;HYUNJAE&lt;br&gt;WOO&lt;/p&gt;
    &lt;div class="side"&gt;&lt;a href="#home"&gt;HOME&lt;/a&gt;&lt;/div&gt;
    &lt;div class="side"&gt;&lt;a href="#portfolio"&gt;PORTFOLIO&lt;/a&gt;&lt;/div&gt;
    &lt;div class="side"&gt;&lt;a href="#contact"&gt;CONTACT&lt;/a&gt;&lt;/div&gt;
    &lt;div class="side"&gt;&lt;a href="#about"&gt;ABOUT&lt;/a&gt;&lt;/div&gt;
   &lt;/div&gt;
  
   &lt;div class="mid-cont homePage" id="main"&gt;
    &lt;article class="panel"&gt;&lt;a id="home"&gt;&lt;/a&gt;
     &lt;p&gt; Welcome to My Website &lt;/p&gt;
     ...
    &lt;/article&gt;
  
    &lt;article class="panel"&gt;&lt;a id="portfolio"&gt;&lt;/a&gt;
     &lt;p&gt; PORTFORLIO &lt;/p&gt;&lt;br&gt;
     ...
    &lt;/article&gt;
  
    &lt;article class="panel"&gt;&lt;a id="contact"&gt;&lt;/a&gt;
     &lt;p&gt; CONTACT &lt;/p&gt;&lt;br&gt;
     ...
  &lt;/article&gt;
  
  &lt;article class="panel"&gt;&lt;a id="about"&gt;&lt;/a&gt;
    &lt;p&gt; ABOUT &lt;/p&gt;&lt;br&gt;
    ...
  &lt;/article&gt;
  </code></pre>
  
  <p>
    </p>
  
  <p>I have this working with just  tag, but I want the smooth transition/scroll to the anchor every time I click on the side bar(my side bar is fixed in position). I have searched through the internet and found few answers using jQuery or javascript, but they ONLY WORKED WHEN IT WAS TOP-TO-BOTTOM SCROLL. Whenever I tried to go from CONTACT up to PORTFOLIO, it would place the screen somewhere between HOME and PORTFOLIO. I feel like the answer is going to be very obvious, but I can't figure out why...Please help me.</p>