Question

我使用<a href>元素和:target css选择器来显示<div>，默认设置为display:none。问题是，当我点击链接以显示<div>时，它会自动向我的网站滚动到<div>。

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

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

Answer 1

您可以使用 event.preventDefault() 来避免这种情况。像这样：

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

OR：

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

Answer 2

在链接中输入：

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

Answer 3

这些链接是锚链接，默认情况下是为那些跳转:)你可以使用JS以某种方式防止默认行为。例如，使用jQuery：

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

或默认情况下将return false;添加到链接

Answer 4

无论如何你还需要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);
})

我不知道这是否会使屏幕闪烁。它可能。无论如何，这都是一个可怕的黑客。

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

Answer 5

避免使用：一起定位并只使用onclick事件。

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

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

Answer 6

这有点像黑客，但你可以使用基本的CSS工作：

<强> CSS only Example

#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 ......

<强> More Flexible Example with JS

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

基本上你是用负边距向上拉div1的顶部，然后用填充向下推div2，这样div1的顶部就在窗口的顶部...就像我说它是一个黑客但是它可以解决问题。

Answer 7

有两种方法可以告诉浏览器我们不希望它起作用：

主要方法是使用事件对象。有办法 event.preventDefault（）。
如果处理程序是使用on分配的（不是通过 addEventListener），那么我们可以从中返回false。

示例： packrat 要么 <a href="/" onclick="return false">Click here</a>

点击<a href=""></a>时阻止屏幕移动

7 个答案: