Anchor element onClick makes page jump to top of page

I have a few buttons on my page and onclick they show or hide a few <div> elements.

The <div> elements are positioned towards the bottom of the page so scrolling to those <div> elements is necessary.

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?

Here is one of the buttons:

<p class="text-center"><a id="Button-1" class="btn btn-default" href="#" role="button">View Details</a></p>

Here is the <div> that appears when the button above is clicked:

<div class="row">
    <div id="Section-1" class="col-md-10">
        <p>The section to appear.</p>
    </div>
</div>

Here is the JavaScript:

$("#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;
});

Here is my research:

Article 1

Any help would be appreciated.

UPDATE

<p class="text-center"><a id="Button-1" class="btn btn-default" href="javascript:void();" role="button">View Details</a></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.

Solution

Firstly mention the element correctly in the title. Its a a not button.

Next: The # in your a tag will by default take you to the top of the page when you click on it.

Use a javascript:void() in the href attribute to overcome this.

Like <a href='javascript:void();'>something</a>

Example snippet

<div>

  Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>

  <a href='javascript:void();'>this</a>
</div>