Tarayıcı sayfasının başına atlamak için nasıl kullanılır

Question

Modal bir popup yazıyorum ve açık modal düğmesine basıldığında ekranın üst kısmına atlamak için tarayıcıya ihtiyacım var. Tarayıcıyı jQuery'yi kullanarak en üste kaydırmanın bir yolu var mı?

Answer 1

Bunu, scrollTop ayarlayabilirsiniz:

$('html, body').animate({ scrollTop: 0 }, 'fast'); 

Answer 2

animasyon olmadan, kullanabilirsiniz düz JS:

$('html,body').scrollTop(0); 

Yoksa yerine üst bir çırpıda küçük animasyonu istiyorsanız :

scroll(0,0) 

Animasyonla, Nick'in yanıtını kontrol edin.

Answer 3

Javascript olmadan yapabilir ve sadece bağlantı etiketlerini kullanabilirsiniz? Sonra bu js ücretsiz erişilebilir olacaktır.

modacıları kullanırken, js özgürlüğüne önem vermediğinizi varsayarım. ;)

Answer 4

jQuery UI iletişim kutusu kullanıyorsanız, pencerede sabitlenmiş olan konumla görünecek şekilde modun stilini çizebilirsiniz, böylece görünümün dışına çıkmaz, kaydırma gereksinimini ortadan kaldırmaz. Aksi takdirde, hile yapmalıdır.

.

Answer 5

jQuery UI iletişim kutusunu kullanıyorsanız, pencerede sabitlenmiş olan konumla görünecek şekilde modun stilini çizebilirsiniz, böylece görünümün dışına çıkmaz, kaydırma gereksinimini ortadan kaldırmaz. Diğer

Answer 6

// When the user scrolls down 20px from the top of the document, show the button 
 
window.onscroll = function() {scrollFunction()}; 
 

 
function scrollFunction() { 
 
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { 
 
     document.getElementById("myBtn").style.display = "block"; 
 
    } else { 
 
     document.getElementById("myBtn").style.display = "none"; 
 
    } 
 
    
 
} 
 

 
// When the user clicks on the button, scroll to the top of the document 
 
function topFunction() { 
 
    
 
    $('html, body').animate({scrollTop:0}, 'slow'); 
 
}

body { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 20px; 
 
} 
 

 
#myBtn { 
 
    display: none; 
 
    position: fixed; 
 
    bottom: 20px; 
 
    right: 30px; 
 
    z-index: 99; 
 
    font-size: 18px; 
 
    border: none; 
 
    outline: none; 
 
    background-color: red; 
 
    color: white; 
 
    cursor: pointer; 
 
    padding: 15px; 
 
    border-radius: 4px; 
 
} 
 

 
#myBtn:hover { 
 
    background-color: #555; 
 
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 

 
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> 
 

 
<div style="background-color:black;color:white;padding:30px">Scroll Down</div> 
 
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>