Question

例如，

<a href="#foo">Foo</a>
<a href="#bar">Bar</a>

 ...

<div id="foo"></div>
<div id="bar"></div>

有没有办法有选择地停止某些元素的滚动？

在上面的示例中，如果我希望浏览器在单击具有“href =”＃bar“的锚点时不滚动到#bar元素，该怎么办？

这可能吗？

Answer 1

使用返回false的点击处理程序，这会阻止默认点击操作。

<a href="#bar" onclick="return false;">Bar</a>

Answer 2

是的，您正在寻找的是如何阻止浏览器默认行为

示例（使用jQuery）

$('a').on('click', function(event){
    if($(this).attr('href') == '#bar'){
        event.preventDefault();
    }
});

Answer 3

好吧，我建议的一种方法是在某些特定情况下删除href属性。但是删除href属性可能导致锚点似乎不再可点击......

如果您希望锚点看起来仍然可点击：

＆＃39; $（＆＃34;＆＃34）。removeAttr（＆＃34; HREF＆＃34）。CSS（＆＃34;光标＆＃34;＆＃34;指针＆＃34; ）;＆＃39;

您可以为特定锚元素指定ID。

Answer 4

如果您向不想滚动的链接添加类或ID，则可以向这些链接添加事件侦听器并阻止单击时的默认操作。

<强> HTML

<a href="#foo">Foo</a>
<a href="#bar" class="blockedLink">Bar</a>

...

<h2 id="foo">Foo</h2>
<h2 id="bar">Bar</h2>

<强>的Javascript

var blockedLinks = document.getElementsByClassName('blockedLink');

for (var i = 0; i < blockedLinks.length; i++) {
    blockedLinks[i].addEventListener('click', function (e) {
        e.preventDefault();
    }, false);
}

<强> Demo

Javascript - 停止在某些链接上滚动

4 个答案: