防止在点击<a href=></a>链接时屏幕滚动

Question

我正在使用<a href>元素和:target css选择器来显示一个默认为display:none的<div>。问题是，当我单击链接以显示该<div>时，它会自动向下滚动到那个<div>。

有没有办法停止屏幕移动？

不幸的是，除了CSS和HTML之外，我还不精通其他任何东西。

- Czulu

---

我认为您需要使用JS，因为您有两种可能性：1. 通过JS避免滚动；2. 使用不同于锚点的元素，但这样您将没有“:target”功能，并且必须通过JS显示所需的元素。 - Ria Weyprecht

正如我所说，我还不会 JavaScript（我才刚开始学习一周）。我怀疑有一种相当简单的方法可以用纯 CSS 和 HTML 来完成我在这里苦苦挣扎的事情，因此虽然我很感激所有的 JS 想法（我会把它们留到以后），但最好的解决方案是仅限于 CSS 和 HTML（如果有的话）。 - Czulu

Answer 1

您可以使用 event.preventDefault() 来避免这种情况。例如:

$('a.yourclass').click(function(e)
{
    //your code
    e.preventDefault();
});

或者：

<a href="javascript:void(0)" onclick="somefunction(); return false;">link</a>

- Rahul Tripathi

---

这将阻止链接被跟踪。如果链接没有被跟踪，那么URL中的片段ID就不会改变，这将达不到预期的效果。 - Quentin

@Quentin：这个怎么样：<a href="javascript:void(0)" onclick="somefunction(); return false;">anchor</a> - Rahul Tripathi

somefunction()会做什么？设置location.hash吗？这会让我们回到起点，但代码更丑陋，而且依赖于JavaScript。 - Quentin

Answer 2

在链接输入框中输入：

<a href="javascript:void();">Link here</a>

- scooterlord

---

该问题说明要触发更改:target。如果更改href指向，则无法实现该目的。 - Quentin

Answer 3

无论如何，您都需要JS：

// (in jQuery)
$el.on('click', function(e) {
  // find current scroll position
  var pos = document.body.scrollTop || document.documentElement.scrollTop;

  // let normal action propagate etc

  // in the next available frame (async, hence setTimeout), reset scroll posiion
  setTimeout(function() {
    window.scrollTo(0, pos);
  }, 1);
})

我不知道这是否会导致屏幕闪烁。可能会。无论如何，这都是一种可怕的hack。

在我的Chrome浏览器中，没有闪烁：http://jsfiddle.net/rudiedirkx/LEwNd/1/show/

- Rudie

---

如果您制作这样的解决方案，我也会保存x位置。以防万一它在那里 :) - Ria Weyprecht

Answer 4

有两种方法可以告诉浏览器我们不希望它执行：

1. 主要的方法是使用事件对象，有一个方法叫做 event.preventDefault()。
2. 如果处理程序是使用 on（而不是 addEventListener）分配的，则可以从中返回 false。

示例： <a href="/" onclick="return false">点此</a> 或 <a href="/" onclick="event.preventDefault()">这里</a>

- Prabakaran Ravy

Answer 5

这些链接是锚点链接，并默认为这些跳转而设计 :) 您可以使用JS以某种方式阻止默认行为。例如，使用jQuery：

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

或者默认情况下在链接中添加return false;

- Ria Weyprecht

---

这将阻止链接被跟踪。如果链接没有被跟踪，那么URL中的片段ID就不会改变，这将达不到预期的效果。 - Quentin

如果需要的话，您仍然可以通过JS来实现。但是，如果他不想要跳转，我通常甚至不会使用链接 :) - Ria Weyprecht

@Quentin：如果您不喜欢提供的解决方案，您有自己的解决方案吗？ - Ria Weyprecht

用JS做什么？跟随链接吗？添加能够精确执行这两个操作的JavaScript代码（1. 阻止链接被跟随，2. 跟随链接）似乎过于无意义！ - Quentin

我还没有看到你不使用JS的解决方案...那么它在哪里？是的，你可以通过JS将Hash-Tag添加到URL中。 - Ria Weyprecht

Answer 6

避免使用 :target，直接使用 onclick 事件。

function myFunction()
{
    document.getElementById('hiddenDiv').style.display = 'block';
    return false;
}

<a href="#" onclick="myFunction()"></a>

- VictorO

Answer 7

这有点像是一个hack，但你可以使用基本的CSS解决方法：

仅CSS示例

#div1 {
    height: 0;
    overflow:hidden;
}
#div1:target {
    height: auto;
    margin-top: -110px;
    padding-top: 110px;
}
#div2 {
    background:red;
}

<a href="#div1">Click to show</a>

<div id="div1">
    <div id="div2">Content</div>
</div>

如果您需要更灵活一些，可以添加一些JS代码... 使用JS的更灵活示例

$('a').click(function () {
    $('#div1').css({
        'margin-top': 0 - $('#div1').position().top + $(window).scrollTop(),
            'padding-top': $('#div1').position().top - $(window).scrollTop()
    });
});

基本上，您使用负边距将div1的顶部向上拉，并使用填充将div2向下推，以便div1的顶部位于窗口顶部...就像我说的那样，这是一种hack方法，但它确实能解决问题。

- apaul