锚点链接滚动条从中间开始

时间:2014-11-10 14:41:37

标签: javascript html css scrollbar anchor

抱歉,我尝试过搜索,但我认为我的问题非常具体。

所以我有2个div,一个带有锚标签,然后是主要内容div。在主内容div中,我有以下脚本隐藏内容div中的不同div以隐藏和显示活动锚链接。

 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';
                  }
            }
      }
    }

一切正常,但是当我点击一个锚点后向下滚动,然后我点击另一个锚点时,它会滚动到我在最后一个锚点上的位置。我尝试将以下内容添加到锚链接中,但没有运气:

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

任何想法或帮助将不胜感激

更新

<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;

}

1 个答案:

答案 0 :(得分:0)

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';                        
            }
            newboxes[x].scrollTop = 0; //scrolls all divs to the top
        }
    }
}

示例小提琴:http://jsfiddle.net/d52k62vp/5/