Anchor scroll bar starting from the middle

Sorry I tried searching, but I think my problem is pretty specific.

So I have 2 divs, one with anchor tags, then the main content div. In the main content div, I have the following script to hide the different divs in the content div to hide and show the active anchor links.

 function showonlyone(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
            for(var x=0; x<newboxes.length; x++) {
                  name = newboxes[x].getAttribute("class");
                  if (name == 'newboxes') {
                        if (newboxes[x].id == thechosenone) {
                        newboxes[x].style.display = 'block';
                  }
                  else {
                        newboxes[x].style.display = 'none';
                  }
            }
      }
    }

      

        
        
        
      

    

Everything works fine, but when I scroll down after clicking one anchor and then click another anchor it scrolls to where I was at the last anchor. I tried adding the following anchor links with no luck:

    function scrollWin()
{
scrollTo(0,0);
}

      

        
        
        
      

    

Any thoughts or help would be appreciated

Update:

<a href="#x1" onclick="showonlyone('newboxes1')"><span class="subsection1">1 Introduction</span></a><br>
<a href="#x1.1" onclick="showonlyone('newboxes2')"><span class="subsection">1.1 What version am I using?</span></a>

      

        
        
        
      

    

Newboxes div:

<div class="newboxes" id="newboxes38">

      

        
        
        
      

    

CSS

#bigbox {
position: fixed;
margin-left:31.7%;
margin-right:auto;
overflow-y:scroll;
overflow-x:hidden;
width:53.25%;
height: 89%;
background-color:#fff;
padding:2em;
border-right:1px grey solid;
border-left:1px grey solid;
padding-bottom: 3em;

      

        
        
        
      

    

}