防止屏幕在点击时移动<a href=></a>

Question

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

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

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

在链接

Answer 1

这是一个黑客位，但你可以使用基本的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 2

输入：

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

Answer 3

这些链接的锚链接，默认情况下为那些跳跃作出:)你可以使用JS以防止在某种程度上的默认行为。例如使用jQuery：

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

或默认添加return false;的链接

Answer 4

您可以使用event.preventDefault()避免这种情况。事情是这样的：

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

OR：

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

Answer 5

你需要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 6

避免：目标都在一起，只是使用onclick事件。

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

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