Question

我有以下脚本：

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

通过在用户的视图中隐藏网站的一部分，直到点击＆＃34; down＆＃34;这正是我想要的。箭头。然后，当他们点击所述箭头时，内容会扩展，并且＆＃34; down＆＃34;箭头变为＆＃34; up＆＃34;箭头。一旦用户点击＆＃34; up＆＃34;箭头，内容再次隐藏，箭头返回＆＃34; down＆＃34;箭头。

诀窍是内容很长，所以当用户点击＆＃34; up＆＃34;箭头，表格所在的部分比用户的视图进一步向上移动。我想使用Anchor标签来解决这个问题，因此无论何时点击任一箭头，用户的视图都会调整到该部分的顶部。有什么想法我可以使用当前的设置去做吗？

Answer 1

您是否尝试过使用带有jQuery的slideUp和slideDown？

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

如何使用Javascript和Anchor标记调整用户视图

2 个答案: