title: Anchor element onClick makes page jump to top of page
body: <p>I have a few buttons on my page and <code>onclick</code> they show or hide a few <code>&lt;div&gt;</code> elements.</p>
  
  <p>The <code>&lt;div&gt;</code> elements are positioned towards the bottom of the page so scrolling to those <code>&lt;div&gt;</code> elements is necessary.</p>
  
  <p>Whenever I click on a button, the page jumps to the top.  So how do I create an anchor so that when the user clicks the button it will stay on that section of the page?</p>
  
  <p>Here is one of the buttons:</p>
  
  <pre><code>&lt;p class="text-center"&gt;&lt;a id="Button-1" class="btn btn-default" href="#" role="button"&gt;View Details&lt;/a&gt;&lt;/p&gt;
  </code></pre>
  
  <p>Here is the <code>&lt;div&gt;</code> that appears when the button above is clicked:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div id="Section-1" class="col-md-10"&gt;
          &lt;p&gt;The section to appear.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the JavaScript:</p>
  
  <pre><code>$("#Button-1").click(function () {
      $("#Section-2").hide();
      $("#Section-3").hide();
      $("#Section-1").toggle("show");
      $("#Button-1").text(function(i, text) {
          return text === "View Details" ? "Hide Details" : "View Details";
      });
      return false;
  });
  </code></pre>
  
  <p>Here is my research:</p>
  
  <p><a href="https://stackoverflow.com/questions/4724408/page-jumps-to-the-top-onclick">Article 1</a></p>
  
  <p>Any help would be appreciated.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <pre><code>&lt;p class="text-center"&gt;&lt;a id="Button-1" class="btn btn-default" href="javascript:void();" role="button"&gt;View Details&lt;/a&gt;&lt;/p&gt;
  </code></pre>
  
  <p>When I click the button.. I scroll down to see the div that appeared.. then click on another button (that look the exact same as above) and the page returns to the top.</p>