Question

我有一个包含一系列问题和答案的HTML文档。

每个问题都包含在div中。每个答案都包含在div中。每个答案都有一个唯一的ID。

每个Answer的CSS样式设置为'none'，以便最初隐藏元素。

当点击一个问题时，div会将相应答案的id传递给此函数：

function toggle(id) {
    var state = document.getElementById(id).style.display;
    if (state == 'block') {
        document.getElementById(id).style.display = 'none';
    } else {
        document.getElementById(id).style.display = 'block';
    }
}

（这会切换答案div的外观。）

问题：如果滚动条处于默认（顶部）位置，此机制在Safari中运行良好。否则，这将导致滚动条重置为默认位置，从而有效地破坏了此机制在长页面上的有用性。

问。有什么办法可以防止滚动条位置被重置？

感谢。

Answer 1

你说你正在使用

<a href='#'>...</a>

......对于这个问题。这就是问题，这是一个告诉浏览器转到页面顶部的链接。您有几种方法可以纠正它：

在链接（或其父级等）上挂起click事件并取消默认操作。你如何做到这一点取决于你如何挂钩事件。听起来你已经挂钩事件，所以这可能是最简单的解决方案。如果你使用onclick=样式钩子，return false;来自你的处理函数。如果您使用的是addEventListener，请在传递给它的event上使用preventDefault。（你可能已经意识到IE的大多数版本不支持addEventListener，而是attachEvent;你如何防止默认也是不同的。这就是为什么我使用像你这样的库jQuery，Prototype，YUI，Closure或any of several others以平滑浏览器差异。）
使用javascript:伪协议代替#，例如：
```
<a href='javascript:;'>...</a>
```
伪协议告诉浏览器在href元素中运行脚本代码。在上面，代码只是一个;（语句终止符），它什么都不做。当然，您可以触发toggle功能：
```
<a href='javascript:toggle("foo");'>...</a>
```
根本不要使用a。是否适合使用它取决于它在概念上是否真的是链接，这完全是你的电话。

Safari - Javascript - 隐藏/显示Div会导致滚动条重置

1 个答案: