Previene lo spostamento dello schermo quando si fa clic su <a href=></a>

Question

Sto usando l'elemento <a href> insieme al selettore :target per mostrare uno <div> che per impostazione predefinita è impostato su display:none. Il problema è che quando faccio clic sul link per mostrare che <div>, si sta scorrendo automaticamente verso il basso verso il mio sito verso lo <div>.

C'è un modo per fermare il movimento dello schermo?

Sfortunatamente non sono ancora esperto in nulla oltre a CSS e HTML.

Answer 1

Questo è un po 'di un hack, ma è possibile utilizzare un lavoro css di base intorno:

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> 

se ne avete bisogno di essere un po' più flessibile è possibile aggiungi un po 'di 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() 
    }); 
}); 

In sostanza si sta tirando la parte superiore della div1 con il margine negativo e poi spingendo div2 indietro verso il basso con l'imbottitura, in modo che la parte superiore div1 riposa nella parte superiore della finestra ... Come ho detto è un hack ma fa il trucco.

Answer 2

nel link immettere:

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

Answer 3

Questi collegamenti sono anchor-link e per impostazione predefinita fatta per quei salti :) Si potrebbe usare JS per evitare che il comportamento predefinito in qualche modo. Ad esempio, utilizzando jQuery:

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

o per difetto aggiungere return false; ai collegamenti

Answer 4

È possibile utilizzare event.preventDefault() per evitare questo. Qualcosa di simile a questo:

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

O:

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

Answer 5

Avrete bisogno di JS comunque:

// (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); 
}) 

Non so se questo sarà uno sfarfallio dello schermo. Potrebbe. In ogni caso è un attacco orribile.

Nel mio Chrome, non c'è nessuna luce intermittente: http://jsfiddle.net/rudiedirkx/LEwNd/1/show/

Answer 6

Evitare l'uso di: bersaglio tutti insieme e basta usare evento onclick.

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

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