Question

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

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

<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/

Answer 1

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

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

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

Answer 2

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

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

Answer 3

您需要使用preventDefault()阻止点击事件的默认操作：

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

Answer 4

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

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

单击<a href="#divID"></a>后防止浏览器垂直滚动

4 个答案: