jQuery neden sayfamı tıklamadan sonra en üste atlatıyor?

Question

jQuery hakkında genel bir sorum var.

Birkaç jQuery düğmesi oluşturdum ancak sayfamın yarısına doğru ilerlediğinizde ve düğmeyi bastığınızda karşılaştığım sorun, düğmenin bulunduğu yerde kalmak yerine, sayfa başa dönüyor?

Kullanıcı için sinir bozucu olduğu için bunun olmasını nasıl engelleyebilirsiniz?

Bunun olmasının belirli bir nedeni var mı?

jsFiddle Example

:

$(".comment-here").click(function() { 
    $(".comment-form").slideToggle('slow'); 
}); 

$(".main-btn.orange").click(function(){ 
    $(".comment-form").slideUp('slow'); 
}); 

Answer 1

Varsayılan olayı engellemiyorsunuz. Bir bağlantı etiketini tıklattığınız için, # için varsayılan olay yalnızca belgenin en üstüne atlamaktır.

oluşmasını engellemek için:

işlevi etkinliği geçirin ve preventDefault (kullanım);

$(".comment-here").click(function(e){ 
    e.preventDefault(); 
    $(".comment-form").slideToggle('slow'); 
}) 

$(".main-btn.orange").click(function(e){ 
    e.preventDefault(); 
    $(".comment-form").slideUp('slow'); 
}) 

Ayrıca sadece varsayılan olayını önleyerek öteye biraz gider, yerine return false; kullanabilirsiniz, bu olayları parent elemanları kadar bubbling duracaktır. çapa etiketleri

Answer 2

<a class="comment-here"> tıklama işleyicisi için return false; ekleyin.

Temel olarak jQuery değil, buna neden olan varsayılan tarayıcı davranışı: bir bağlantıyı tıklattınız, hrefine gitmek zorundasınız, bu da bu ... "#", yani bu sayfa. Yani bu sayfaya geri dönüyoruz (en üstte).

Answer 3

önle varsayılan davranışı:

$(".comment-here").click(function(e){ 
    e.preventDefault(); 
    //.... 
}); 

Answer 4

Sorun <a> etiket geçerli sayfayı başvurur ve üstüne çeker href="#" kullanarak beraberdir.

Diğer yanıtlarda bahsedilen varsayılan olay önleme yerine aşağıdaki yaklaşımları öneririm. Tabii ki bu işler, ama neden bir öğeyi yalnızca varsayılan işlevlerini kaldırmak için kullanıyorsunuz? <a> kullanımıyla ilgili iseniz

http://jsfiddle.net/RvHjx/7/

2.) ölü seti:

1.) Bir <button> yerine <a> ait kullanın:

Ergo, senin amaç için tasarlanmıştır şey kullanın <a> etiketinde href özniteliğini kaldırın. Bu mavi-altı çizili bağlantı stil (hala linki fonksiyonlarının doğru olsa da) kaldıracaktır, ancak bazı CSS ile halletmek kolay:

http://jsfiddle.net/RvHjx/11/

Answer 5

ekleme javascript :; bir etiketinize href en basit yoludur.

<a href="javascript:;">my link</a>