Nie zezwalaj na przesuwanie ekranu po kliknięciu na <a href=></a>

Question

Używam elementu wraz z :target selektorem css, aby pokazać <div>, który domyślnie jest ustawiony na display:none. Problem polega na tym, że po kliknięciu linku pokazującego, że <div>, automatycznie przewijam stronę w dół do tego <div>.

Czy istnieje sposób na zatrzymanie ruchu ekranu?

Niestety, nie mam jeszcze wprawy w niczym oprócz CSS i HTML.

Answer 1

Jest to bit hack, ale można użyć podstawowych prac css wokół:

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> 

jeśli jest to potrzebne, aby być nieco bardziej elastyczne można dodaj 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() 
    }); 
}); 

Zasadniczo jesteś pociągnięcie szczyt div1 z marży ujemnej, a następnie z powrotem w dół popychając Div2 z wyściółką, tak że górna div1 spoczywa na górnej części okna ... Tak jak mówiłem jest hackem, ale działa.

Answer 2

w linku wpisać:

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

Answer 3

Te linki są linki kotwicy i domyślnie dla tych skoków :) Można użyć JS, aby zapobiec domyślne zachowanie w jakiś sposób. Na przykład przy użyciu jQuery:

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

lub domyślnie dodawać return false; do linków

Answer 4

Można użyć event.preventDefault(), aby tego uniknąć. Coś takiego:

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

OR:

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

Answer 5

Musisz JS i tak:

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

Nie wiem, czy to będzie migotać ekran. Może. To okropne włamanie w obie strony.

W moim Chrome, nie ma migotania: http://jsfiddle.net/rudiedirkx/LEwNd/1/show/

Answer 6

Unikaj używania: cel wszystkich razem i po prostu użyć onclick wydarzenie.

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

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