कैसे बनाएं: पृष्ठ के शीर्ष पर वापस जाने वाले बटन

कैसे शीर्ष पर जाने वाले बटन को बनाएं

पहला कदम - HTML जोड़ें:

एक बटन बनाएं जो यह बटन क्लिक करने पर उपयोगकर्ता को पृष्ठ के शीर्ष पर ले जाएगा:

<button onclick="topFunction()" id="myBtn" title="शीर्ष पर जाएं">शीर्ष</button>

दूसरा कदम - CSS जोड़ें:

बटन के शैली को सेट करें:}

#myBtn {
  display: none; /* डिफ़ॉल्ट रूप से छिपाया है */
  position: fixed; /* फिक्स्ड/स्टिकी पोजीशन */
  bottom: 20px; /* बटन को पृष्ठ के नीचे 20px दूरी पर रखें */
  right: 30px; /* बटन को पृष्ठ के दायाँ तरफ 30px दूरी पर रखें */
  z-index: 99; /* इसे ओवरलैप नहीं होने दें */
  border: none; /* किनारा हटाएं */
  outline: none; /* किनारा हटाएं */
  background-color: red; /* पृष्ठभूमि रंग सेट करें */
  color: white; /* लेख रंग */
  cursor: pointer; /* माउस ओवर पर माउस संकेतक जोड़ें */
  padding: 15px; /* कुछ आंतरिक गाप */
  border-radius: 10px; /* गोलाकार */
  font-size: 18px; /* फ़ॉन्ट आकार बढ़ाएं */
}
#myBtn:hover {
  background-color: #555; /* माउस ओवर पर गहरे भूरे पृष्ठभूमि जोड़ें */
}

तीसरा - जावास्क्रिप्ट जोड़ें:

// बटन को प्राप्त करें:
let mybutton = document.getElementById("myBtn");
// जब उपयोगकर्ता दस्तावेज़ के शीर्ष से 20px नीचे स्क्रॉल करता है तो इस बटन को दिखाएं
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// जब उपयोगकर्ता बटन पर क्लिक करता है तो दस्तावेज़ के शीर्ष पर स्क्रॉल करें
function topFunction() {
  document.body.scrollTop = 0; // सैफारी के लिए
  document.documentElement.scrollTop = 0; // चायम, फायरफॉक्स, आईई और ओपेरा ब्राउज़रों के लिए
}

स्वयं आयात करें