点击< a href ="＃divID">之后，阻止浏览器垂直滚动 [英] Prevent browser from vertical scrolling after clicking <a href="#divID">

问题描述

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

In the middle of my page I got a tiny menu, when you click a button it will horizontally scroll to the content you've chosen. But when you click it the entire window scrolls so the menu is on the top. Here's the graphical representation of my issue.

http：// imgur。 com / yJe7wg8

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

Here's the code I'm going to modify and use:

<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

+some jQuery to make it slide from #left to #right

以下是演示示例：

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

推荐答案

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

The default action of a # link is to navigate the the named ID. You need to prevent the default action:

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

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

这篇关于点击< a href ="＃divID">之后，阻止浏览器垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！