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

Question

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

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

每个答案的 CSS 样式设置为“无”，以便最初隐藏元素。

当一个Question被点击时，div将对应Answer的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';
    }
}

（这会切换 Answer div 的外观。）

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

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

谢谢。

Answer 1

你说过你正在使用

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

...对于这个问题。这就是问题所在，这是一个告诉浏览器转到页面顶部的链接。你有几个选项可以纠正它：

1. 将click 事件挂在链接（或其父级等）上并取消默认操作。你如何做到这一点取决于你如何挂钩事件。听起来您已经挂钩了该事件，所以这可能是最简单的解决方案。如果您使用 onclick= 样式的钩子，请在处理函数之外使用 return false;。如果您使用的是addEventListener，请在传入的event 上使用preventDefault。 （您可能已经知道大多数版本的 IE 不支持addEventListener，而是支持attachEvent；防止默认设置的方式也不同。这就是我使用像jQuery 这样的库的原因， Prototype、YUI、Closure 或 any of several others 以消除浏览器差异。）

2. 使用javascript: 伪协议代替#，例如：

   <a href='javascript:;'>...</a>
   

   伪协议告诉浏览器运行href 元素中的脚本代码。在上面，代码只是一个;（语句终止符），它什么也不做。当然，你可以让它触发你的 toggle 函数：

   <a href='javascript:toggle("foo");'>...</a>
   

3. 根本不要使用a。是否适合使用一个取决于它在概念上是否真的是一个链接，这完全是你的决定。