How to overwrite anchor element's href target and remove other bugs in my click-to-go-to-target javascript?
<p>I've made a webpage. I want to implimenet the feature which scrolls the webpage to the location of href target of menu anchors. My code is as following</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> var myscroll = {};
 myscroll.list = document.getElementsByClassName("navbar-right")[0].getElementsByTagName("li");

 myscroll.bodypos = function getScrollY() {
   scrOfY = 0;
   if (typeof(window.pageYOffset) == 'number') {
     //Netscape compliant
     scrOfY = window.pageYOffset;

   } else if (document.body &amp;&amp; (document.body.scrollLeft || document.body.scrollTop)) {
     //DOM compliant
     scrOfY = document.body.scrollTop;

   } else if (document.documentElement &amp;&amp; (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
     //IE6 standards compliant mode
     scrOfY = document.documentElement.scrollTop;

   }
   return scrOfY;
 }

 function getScrollpos(idname) {
   return document.getElementById(idname).offsetTop;
 }
 myscroll.point = [];
 myscroll.point[0] = getScrollpos("home");
 myscroll.point[1] = getScrollpos("artists");
 myscroll.point[2] = getScrollpos("songs");
 myscroll.point[3] = getScrollpos("beats");
 myscroll.point[4] = getScrollpos("contact");

 function removeclass() {
   for (var i = 0; i &lt; 5; i++) {
     myscroll.list[i].className = "";
   }
 }

 window.addEventListener('scroll', function(e) {

   if (myscroll.bodypos() &gt;= myscroll.point[0]) {
     removeclass();
     myscroll.list[0].className = "active";
   }


   if (myscroll.bodypos() &gt;= myscroll.point[1]) {
     removeclass();

     myscroll.list[1].className = "active";
   }

   if (myscroll.bodypos() &gt;= myscroll.point[2]) {
     removeclass();
     myscroll.list[2].className = "active";

   }

   if (myscroll.bodypos() &gt;= myscroll.point[3]) {
     removeclass();
     myscroll.list[3].className = "active";

   }

   if (myscroll.bodypos() &gt;= myscroll.point[4]) {
     removeclass();
     myscroll.list[4].className = "active";

   }
 });

 for (var j = 0; j &lt; 5; j++) {

   (function(j) {

     myscroll.list[j].anchor = document.getElementsByClassName("navbar-right")[0].getElementsByTagName("li")[j].getElementsByTagName("a")[0];
     myscroll.list[j].anchor.addEventListener("click", function() {



       if ((document.body.scrollTop != undefined) &amp;&amp; (document.body.scrollTop &lt; myscroll.point[j])) {

         var clr1 = setInterval(function() {
           if (document.body.scrollTop &lt; myscroll.point[j] - 10) {
             document.body.scrollTop += 3;
           } else {
             document.body.scrollTop = myscroll.point[j];
             clearInterval(clr1);
           }
         }, 1);
       }



       if ((document.documentElement.scrollTop != undefined) &amp;&amp; (document.documentElement.scrollTop &lt; myscroll.point[j])) {

         var clr2 = setInterval(function() {
           if (document.documentElement.scrollTop &lt; myscroll.point[j] - 10) {
             document.documentElement.scrollTop += 3;
           } else {
             document.documentElement.scrollTop = myscroll.point[j];
             clearInterval(clr2);
           }
         }, 1);
       }


       if ((document.body.scrollTop != undefined) &amp;&amp; (document.body.scrollTop &gt; myscroll.point[j])) {
         var clr3 = setInterval(function() {
           if (document.body.scrollTop &gt;= myscroll.point[j] + 4) {
             document.body.scrollTop -= 3;
           } else {
             document.body.scrollTop = myscroll.point[j];
             clearInterval(clr3);
           }

         }, 1);
       }

       if ((document.documentElement.scrollTop != undefined) &amp;&amp; (document.documentElement.scrollTop &gt; myscroll.point[j])) {
         var clr4 = setInterval(function() {
           if (document.documentElement.scrollTop &gt;= myscroll.point[j] + 4) {
             document.documentElement.scrollTop -= 3;
           } else {
             document.documentElement.scrollTop = myscroll.point[j];
             clearInterval(clr4);
           }

         }, 1);
       }
       alert(j);

     }, true);

   }(j));

 }</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#navbar,
#navbar a:link,
#navbar a:visited,
#navbar a:hover {
  position: fixed;
  color: red !important;
}
#home {
  width: 500px;
  height: 500px;
  background-color: black;
  display: block;
}
#artists {
  width: 500px;
  height: 500px;
  background-color: gray;
  display: block;
}
#songs {
  width: 500px;
  height: 500px;
  background-color: yellow;
  display: block;
}
#beats {
  width: 500px;
  height: 500px;
  background-color: blue;
  display: block;
}
#contact {
  width: 500px;
  height: 500px;
  background-color: green;
  display: block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="navbar" class="navbar-collapse collapse"&gt;
  &lt;ul class="nav navbar-nav navbar-right"&gt;
    &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#artists"&gt;Artists&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#songs"&gt;Songs&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#beats"&gt;Beats&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;

&lt;div id="home"&gt;&lt;/div&gt;
&lt;div id="artists"&gt;&lt;/div&gt;
&lt;div id="songs"&gt;&lt;/div&gt;
&lt;div id="beats"&gt;&lt;/div&gt;
&lt;div id="contact"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>As such the code doesn't do what it is supposed to. If we remove <code>href</code> attributes of menu's anchor tags then the code works as expected but with one bug. The problem with the <code>href</code> tags is that before the <code>onclick</code> function could do anything the webpages scrolls quickly to the <code>href target</code>. <a href="https://stackoverflow.com/questions/15622100/how-can-i-disable-href-if-onclick-is-executed">Other posts</a> say returntning false with onclick would disable the <code>href</code> target. The problem is that I am not using <code>onclick</code>; I am using <code>addEventListener("click")</code>. I tried returning both <code>false</code> and <code>true</code> but nothing worked. So,  </p>

<ul>
<li>Why is it said returning <code>false</code> stops href function of anchor elements? Now I know that <code>preventDefault</code> will do what I want. But I want to know how to acheive the same by returning false.</li>
</ul>

<p>Now comes the bug. When I click on <code>contact</code> link it scrolls down to the bottom of page and remains fixed there. If I scroll upwards then the page is automatically scrolled to bottom.  </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> var myscroll = {};
 myscroll.list = document.getElementsByClassName("navbar-right")[0].getElementsByTagName("li");

 myscroll.bodypos = function getScrollY() {
   scrOfY = 0;
   if (typeof(window.pageYOffset) == 'number') {
     //Netscape compliant
     scrOfY = window.pageYOffset;

   } else if (document.body &amp;&amp; (document.body.scrollLeft || document.body.scrollTop)) {
     //DOM compliant
     scrOfY = document.body.scrollTop;

   } else if (document.documentElement &amp;&amp; (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
     //IE6 standards compliant mode
     scrOfY = document.documentElement.scrollTop;

   }
   return scrOfY;
 }

 function getScrollpos(idname) {
   return document.getElementById(idname).offsetTop;
 }
 myscroll.point = [];
 myscroll.point[0] = getScrollpos("home");
 myscroll.point[1] = getScrollpos("artists");
 myscroll.point[2] = getScrollpos("songs");
 myscroll.point[3] = getScrollpos("beats");
 myscroll.point[4] = getScrollpos("contact");

 function removeclass() {
   for (var i = 0; i &lt; 5; i++) {
     myscroll.list[i].className = "";
   }
 }

 window.addEventListener('scroll', function(e) {

   if (myscroll.bodypos() &gt;= myscroll.point[0]) {
     removeclass();
     myscroll.list[0].className = "active";
   }


   if (myscroll.bodypos() &gt;= myscroll.point[1]) {
     removeclass();

     myscroll.list[1].className = "active";
   }

   if (myscroll.bodypos() &gt;= myscroll.point[2]) {
     removeclass();
     myscroll.list[2].className = "active";

   }

   if (myscroll.bodypos() &gt;= myscroll.point[3]) {
     removeclass();
     myscroll.list[3].className = "active";

   }

   if (myscroll.bodypos() &gt;= myscroll.point[4]) {
     removeclass();
     myscroll.list[4].className = "active";

   }
 });

 for (var j = 0; j &lt; 5; j++) {

   (function(j) {

     myscroll.list[j].anchor = document.getElementsByClassName("navbar-right")[0].getElementsByTagName("li")[j].getElementsByTagName("a")[0];
     myscroll.list[j].anchor.addEventListener("click", function(event) {


          event.preventDefault();
       if ((document.body.scrollTop != undefined) &amp;&amp; (document.body.scrollTop &lt; myscroll.point[j])) {

         var clr1 = setInterval(function() {
           if (document.body.scrollTop &lt; myscroll.point[j] - 10) {
             document.body.scrollTop += 3;
           } else {
             document.body.scrollTop = myscroll.point[j];
             clearInterval(clr1);
           }
         }, 1);
       }



       if ((document.documentElement.scrollTop != undefined) &amp;&amp; (document.documentElement.scrollTop &lt; myscroll.point[j])) {

         var clr2 = setInterval(function() {
           if (document.documentElement.scrollTop &lt; myscroll.point[j] - 10) {
             document.documentElement.scrollTop += 3;
           } else {
             document.documentElement.scrollTop = myscroll.point[j];
             clearInterval(clr2);
           }
         }, 1);
       }


       if ((document.body.scrollTop != undefined) &amp;&amp; (document.body.scrollTop &gt; myscroll.point[j])) {
         var clr3 = setInterval(function() {
           if (document.body.scrollTop &gt;= myscroll.point[j] + 4) {
             document.body.scrollTop -= 3;
           } else {
             document.body.scrollTop = myscroll.point[j];
             clearInterval(clr3);
           }

         }, 1);
       }

       if ((document.documentElement.scrollTop != undefined) &amp;&amp; (document.documentElement.scrollTop &gt; myscroll.point[j])) {
         var clr4 = setInterval(function() {
           if (document.documentElement.scrollTop &gt;= myscroll.point[j] + 4) {
             document.documentElement.scrollTop -= 3;
           } else {
             document.documentElement.scrollTop = myscroll.point[j];
             clearInterval(clr4);
           }

         }, 1);
       }
       alert(j);

     }, true);

   }(j));

 }</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#navbar,
#navbar a:link,
#navbar a:visited,
#navbar a:hover {
  position: fixed;
  color: red !important;
}
#home {
  width: 500px;
  height: 500px;
  background-color: black;
  display: block;
}
#artists {
  width: 500px;
  height: 500px;
  background-color: gray;
  display: block;
}
#songs {
  width: 500px;
  height: 500px;
  background-color: yellow;
  display: block;
}
#beats {
  width: 500px;
  height: 500px;
  background-color: blue;
  display: block;
}
#contact {
  width: 500px;
  height: 500px;
  background-color: green;
  display: block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="navbar" class="navbar-collapse collapse"&gt;
  &lt;ul class="nav navbar-nav navbar-right"&gt;
    &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#artists"&gt;Artists&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#songs"&gt;Songs&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#beats"&gt;Beats&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;

&lt;div id="home"&gt;&lt;/div&gt;
&lt;div id="artists"&gt;&lt;/div&gt;
&lt;div id="songs"&gt;&lt;/div&gt;
&lt;div id="beats"&gt;&lt;/div&gt;
&lt;div id="contact"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<ul>
<li>How do I remove this bug?</li>
</ul>