javascript切换功能导致页面滚动到顶部

Question

在执行 javascript 函数后网页返回到页面顶部有一个小问题。

基本上，我有一个小的 javascript 函数，它通过更改 div 的显示样式来切换 div 的可见性。代码如下：

<script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

然后我使用如下所示的链接调用它：

<a href="#" onclick="toggle_visibility('001');" class="expand">[+/-] Hide/Show Info</a> 

div 看起来像这样：

<div id="001" style="display:none;">
hello world
</div>

这很好用。但是当我点击我的“展开/隐藏”链接来切换 div 的可见性时，页面总是返回到顶部，所以我每次都必须向下滚动到底部。

我尝试在我的 javascript 函数末尾添加以下更改，但它们都不起作用：

window.location = 'test.php#' + id; //where test.php is my current page

和

window.location.hash=id;

如果能解决此问题，我们将不胜感激 谢谢。

Answer 1

建议不要超载链接，而是使用跨度：

Live Demo

<style>
.expand { cursor:pointer; }
</style>

<span data-div="x001" 
 class="expand">[+/-] Hide/Show Info</a> 

我也强烈推荐

• 不使用数字 ID
• 不使用内联事件处理程序

所以

window.onload=function() {
  var links = document.querySelectorAll(".expand");
  for (var i=0;i<links.length;i++) {
    links[i].onclick=function(e) {
      e.preventDefault();  
      var ele = document.getElementById(this.getAttribute("data-div"));
      if (ele) ele.style.display = ele.style.display == "block"?"none":"block";
    }
  }
}

使用

<div id="x001">...</div>

---

通过链接，你可以使用页面作为href来告诉用户启用JS或承担后果:)

<a href="pleaseenablejs.html" data-div="x001" 
 class="expand">[+/-] Hide/Show Info</a> 

---

要修复您的代码，您需要返回 false。在较新的浏览器中，使用 event.preventDefault

function toggle_visibility(id) {
   var elm = document.getElementById(id);
   elm.style.display = elm.style.display == "block"?"none":"block";
   return false;
}

使用

<a href="#" onclick="return toggle_visibility('001');" 
 class="expand">[+/-] Hide/Show Info</a> 

Answer 2

使用

<a href="javascript:void(0)" onclick="toggle_visibility('001');" class="expand">[+/-] Hide/Show Info</a>

Answer 3

在点击事件之后，您的链接会将 url 重定向到“#”，因为您没有停止事件传播。

您可以通过更改您的 href javascript:void(0) 来实现。

如果你问为什么here your answer。