如何使用JavaScript和锚标记调整用户的观点(How To Adjust a User'

我有以下脚本：

<div id=tbl name=tbl style="overflow:hidden;display:none">
<script language="JavaScript" type="text/javascript">
<!--

function sizeTbl() {

    var tbl = document.getElementById('tbl');
    var icon = document.getElementById('toggle-table');
    if (icon.src === 'up_arrow.png'){

        tbl.style.display = 'none';
        icon.src = 'down_arrow.png';
    }
    else {
        tbl.style.display = 'block';
        icon.src = 'up_arrow.png';    
    }
}

// -->
</script> 
<br>

<a href="javascript:sizeTbl()"><img src="down_arrow.png" id="toggle-table"></a>

这由具有从用户的视图中隐藏，直到点击“下”箭头网站的部分正是我想要的呢。 然后，当他们点击箭头表示，内容扩展和“向下”箭头变成一个“向上”箭头。 一旦用户点击“向上”的箭头，内容再次隐藏和箭头返回到“向下”箭头。

诀窍是，内容相当长，所以当用户关闭通过按表位于偏移进一步上涨不是用户的视图中的“向上”的箭头，该部分的部分。 我想解决的是使用锚标记所以每当要么箭头被击中，用户的视野调整到部分的顶部。 任何想法如何，我可以去，使用目前的设置？

Answer 1:

你使用效果基本show和了slideDown与jQuery试过吗？

Answer 2:

编辑：

我会建议window.scrollto（） 的jsfiddle而不是使用锚与散列，使用任何元素具有id

function sizeTbl() {
    var tbl = document.getElementById('tbl');
    var icon = document.getElementById('toggle-table');
    if (icon.innerText === 'hide'){
        tbl.style.display = 'none';
        icon.innerText = 'show';
    }
    else {
        tbl.style.display = 'block';
        icon.innerText = 'hide';    
    }
    var x = getOffset( document.getElementById('bottom') );
    console.log(x);
    window.scrollTo(x.left, x.top); // values are x,y-offset
}

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
} 

文章来源: How To Adjust a User's view using Javascript and Anchor tags