JavaScript - 单击链接后页面返回顶部答案

【问题标题】：JavaScript - Page goes back to the top after clicking on linkJavaScript - 单击链接后页面返回顶部
【发布时间】：2016-08-10 06:25:08
【问题描述】：

这很烦人，因为您必须向下滚动到原来的位置。谁能告诉我这是什么行为。

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

HTML

<a href="#" onclick="toggle_visibility('foo');">School Area</a>
<div id="foo" style="display: none;">...</div>

【问题讨论】：

How to prevent a click on a '#' link from jumping to top of page in jQuery的可能重复

标签： javascript jquery html

【解决方案1】：

这是因为href="#" 告诉浏览器在点击链接时跳转到页面顶部。

您可以通过从您的 onclick 属性处理程序返回 false 来阻止该默认操作：

<a href="#" onclick="toggle_visibility('foo');return false;">School Area</a>

但是当您使用 jQuery 时，请考虑动态附加该事件处理程序（甚至使用事件委托），然后使用 preventDefault：

<a href="#" class="toggle-vis" data-visibility="foo">School Area</a>

那么这里是一个委托处理程序：

$(document.body).on("click", ".toggle-vis", function(e) {
    e.preventDefault();
    toggle_visibility(this.getAttribute("data-visibility"));
});

注意data-visibility 属性如何控制我们切换的内容。

你会让人告诉你改变这条线：

toggle_visibility(this.getAttribute("data-visibility"));

到

// Only do this if you understand what `data` does
toggle_visibility($(this).data("visibility"));

但data 不只是data-* 元素的访问器，它做的更多（和更少）。如果您不需要工作设置的功能，则无需将元素包装在 jQuery 实例中并调用 data. 但如果您更喜欢更多 jQuery™：

toggle_visibility($(this).attr("data-visibility"));

也可以。

【讨论】：

【解决方案2】：

这是因为#。将此添加到href：

<a href="javascript:void(0)"></a>

【讨论】：

【解决方案3】：

<a> 元素的默认行为是 navigation/redirection

使用e.preventDefault() 防止默认操作

function toggle_visibility(e, id) {
  e.preventDefault();
  var e = document.getElementById(id);
  if (e.style.display == 'block')
    e.style.display = 'none';
  else
    e.style.display = 'block';
}

<a href="#" onclick="toggle_visibility(event,'foo');">School Area</a>
<div id="foo" style="display: none;">...</div>

【讨论】：

【解决方案4】：

这是您可以使用的该元素的默认行为

在href 中使用javascript:void(0) 以避免其行为。

<a href="javascript:void(0)" onclick="toggle_visibility('foo');">School Area</a>

或

在函数中使用preventDefault() 以防止其默认行为执行。

function toggle_visibility(e, id) {
   e.preventDefault();
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

【讨论】：

【解决方案5】：

你也可以改变

<a href="#" onclick="toggle_visibility('foo');">School Area</a>

到

<a style="cursor:pointer;text-decoration:underline;color:blue"
  onclick="toggle_visibility('foo');"
>School Area</a>

【讨论】：