ब्राउज़र पेज के शीर्ष पर कैसे जाएं

Question

मैं एक मॉडल पॉपअप लिख रहा हूं और खुले मोडल बटन दबाए जाने पर मुझे स्क्रीन के शीर्ष पर कूदने के लिए ब्राउज़र की आवश्यकता है। JQuery का उपयोग कर ब्राउज़र को शीर्ष पर स्क्रॉल करने का कोई तरीका है?

Answer 1

आप scrollTop सेट कर सकते हैं, इस तरह:

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

Answer 2

एनीमेशन के बिना, आप उपयोग कर सकते हैं सादा जे एस:

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

या आप शीर्ष करने के लिए एक तस्वीर के बजाय एक छोटे से एनीमेशन चाहते हैं :

scroll(0,0) 

एनीमेशन के साथ, निक का जवाब देखें।

Answer 3

आप इसे जावास्क्रिप्ट के बिना कर सकते हैं और केवल एंकर टैग का उपयोग कर सकते हैं? फिर यह उन जेएस मुक्त करने के लिए सुलभ होगा।

हालांकि आप मॉडलों का उपयोग कर रहे हैं, मुझे लगता है कि आप जेएस मुक्त होने की परवाह नहीं करते हैं। ;)

Answer 4

यदि आप jQuery UI संवाद का उपयोग कर रहे हैं, तो आप खिड़की में तय की गई स्थिति के साथ मोडल को स्टाइल कर सकते हैं, इसलिए यह स्क्रॉल करने की आवश्यकता को अस्वीकार करते हुए दृश्य से पॉप-अप नहीं होता है। अन्यथा,

var scrollTop = function() { 
    window.scrollTo(0, 0); 
}; 

चाल चलाना चाहिए।

Answer 5

आप jQuery UI संवाद का उपयोग कर रहे हैं, तो आप खिड़की में तय की गई स्थिति के साथ मोडल को स्टाइल कर सकते हैं, इसलिए यह स्क्रॉल करने की आवश्यकता को अस्वीकार करते हुए दृश्य से पॉप-अप नहीं होता है। अन्य

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>