点击<a href="#divID">后防止浏览器垂直滚动答案

【问题标题】：Prevent browser from vertical scrolling after clicking <a href="#divID">点击<a href="#divID">后防止浏览器垂直滚动
【发布时间】：2013-12-11 18:47:07
【问题描述】：

在我的页面中间有一个小菜单，当您单击一个按钮时，它会水平滚动到您选择的内容。但是当您单击它时，整个窗口会滚动，因此菜单位于顶部。这是我的问题的图形表示。

http://imgur.com/yJe7wg8

这是我要修改和使用的代码：

<div id="left">
<a href="#target1" class="panel">Target 1</a><br/>
<a href="#target2" class="panel">Target 2</a><br/>
<a href="#target3" class="panel">Target 3</a><br/>

<div id="right">
<div class="panel" id="target1" style="background:green">Target 1</div>
<div class="panel" id="target2" style="background:red">Target 2</div>
<div class="panel" id="target3" style="background:yellow">Target 3</div>

+一些 jQuery 让它从 #left 滑动到 #right

这是工作演示：

http://jsfiddle.net/codeSpy/KyV6L/

【问题讨论】：

那么您的具体要求是什么
如果您实际上不希望 href 表现得像一个链接，为什么不直接删除它？

标签： javascript jquery html css scroll

【解决方案1】：

# 链接的默认操作是导航命名的ID。您需要阻止默认操作：

$('a.panel').click(function(e) {
    e.preventDefault();

    /* rest of your function ... */
});

【讨论】：

非常感谢，成功了。但是现在“ $("#target1").addClass('active').show();”在我的网站上不起作用（在小提琴中它起作用）。在我单击 target2 或 target3 之前，它不会激活“#target1”，而是保持空白（单击 target1 不会执行任何操作）。你知道这是为什么吗？

【解决方案2】：

在您的点击事件中使用return false 或preventDefault()：

$('a.panel').click(function(e) {
    e.preventDefault();
    // ...
};

【讨论】：

【解决方案3】：

你需要使用preventDefault()来阻止点击事件的默认动作：

$('a.panel').click(function(e) {
    e.preventDefault();
    ...
});

【讨论】：

【解决方案4】：

这帮助我在允许水平滚动的同时防止垂直滚动。

$('a').click(function(e) {
var aid = $(this).attr("href");
$('html,body').animate({scrollTop: 0});});

【讨论】：

【解决方案5】：

我认为您遇到的问题可能来自您使用的 href。由于它们是实际的 url，它们会尝试导航（滚动）到您使用 # 定义的锚点。由于它们不存在，页面将自动滚动到您网站的顶部。

尝试使用 ID 作为属性，或者其他答案建议阻止默认操作。

【讨论】：