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

Question

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

Answer 1

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

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

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

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

Comments

अच्छा एक ... मैंने इसे पूरा करने के लिए jQuery से पहले स्क्रॉलटो प्लगइन का उपयोग किया है - आपके कोड के साथ कोड का थोड़ा सा बचाया जा सकता है ... सबक के लिए ;-)

— ज़ाथ्रस लेखक

@MikhailBatcer - अपने CSS को अक्षम करें और फिर देखें कि क्या यह काम करता है। आपके पास यह समस्या हो सकती है कि आपने अपने htmlऔर bodyटैग को कैसे स्टाइल किया है । अन्यथा उपयोग करें $(window)।

— invot

एनीमेशन-स्कर्ोलिंग के लिए अवधि कैसे जोड़ें?

— मैक्सिम स्ट्रूटिंस्की

Answer 2

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

scroll(0,0)

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

Comments

क्या यह सभी ब्राउज़रों में समर्थित है?

— पचेरियर

scrollCSSOM मानक में है जबकि scrollToमूल रूप से DOM स्तर 0 में परिभाषित किया गया था और किसी भी मानक का हिस्सा नहीं था। हालाँकि, CSSOM में scrollToपीछे की संगतता शामिल है।

— क्लिंट पाचल

मुझे लगता scrollहै कि व्यापक रूप से समर्थित है। देखें stackoverflow.com/q/1925671/41906

— क्लिंट पचेल

धन्यवाद। मुझे लगता window && window.scroll(0,0);है कि मेरे विचार मॉडल में स्वीकार्य है।

— नोड्रोइड

Answer 3

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

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

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

Answer 4

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

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

Comments

लंगर टैग का उपयोग हैश-आधारित नेविगेशन को बाधित करेगा।

— टॉम लैंडौ

Answer 5

// 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>

Answer 6

मुझे पता है कि यह पुराना है, लेकिन एज में समस्या वाले लोगों के लिए:

सादा जेएस: window.scrollTop=0;

दुर्भाग्य से, scroll()और scrollTo()एज में त्रुटियों को फेंक दें।

Answer 7

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

Answer 8

शुद्ध जावास्क्रिप्ट समाधान

theId.onclick = () => window.scrollTo(top: 0)

यदि आप चिकनी स्क्रॉलिंग चाहते हैं

theId.onclick = () => window.scrollTo({ top: 0, behavior: `smooth` })