HTML DOM scrollTop प्रॉपर्टी

scrollTop प्रॉपर्टी क्या है?

HTML DOM scrollTop प्रॉपर्टी किसी तत्व के कंटेंट को ऊर्ध्वाधर रूप से कितने पिक्सेल स्क्रॉल किया गया है, यह प्राप्त या सेट करती है। यह केवल उन तत्वों पर काम करती है जिनमें overflow सेट हो (जैसे auto, scroll, या hidden)।

सिंटैक्स

scrollTop मान प्राप्त करना

element.scrollTop

scrollTop मान सेट करना

element.scrollTop = value

यहां value पिक्सेल में एक पूर्णांक है।

उदाहरण

यह उदाहरण एक स्क्रॉल करने योग्य डिव के अंदर ऊर्ध्वाधर और क्षैतिज स्क्रॉल स्थिति दोनों को प्रदर्शित करता है:

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    text-align: center;
    color: #fff;
    background: #ff7f5094;
    height: 100%;
  }
  p { font-weight: 700; font-size: 1.8rem; height: 80px; overflow: auto; width: 150px; margin: 20px auto; }
  .btn {
    background: #0197F6;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 35%;
    margin: 2rem auto;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
  }
  .show { font-size: 1.5rem; }
  #myDIV {
    height: 200px;
    width: 200px;
    overflow: auto;
    margin: 20px auto;
    border: 2px solid #fff;
  }
  #content {
    height: 400px;
    width: 1000px;
    background-color: lightblue;
  }
</style>
</head>
<body>
<h1>DOM scrollLeft/scrollTop प्रॉपर्टी डेमो</h1>
<div id="myDIV" onscroll="display()">
  <div id="content"></div>
</div>
<div class="show"></div>
<script>
  function display() {
    var elmnt = document.getElementById("myDIV");
    var x = elmnt.scrollLeft;
    var y = elmnt.scrollTop;
    document.querySelector(".show").innerHTML = "Top Scroll = " + y + "px, Left Scroll = " + x + "px";
  }
</script>
</body>
</html>

आउटपुट

नीले बॉक्स (#content) के अंदर स्क्रॉल करें ताकि शीर्ष और बाएं स्क्रॉल मान वास्तविक समय में अपडेट हों।

व्यावहारिक उपयोग

स्क्रॉल स्थिति पढ़ना: "बैक टू टॉप" बटन दिखाने/छिपाने के लिए, अनंत स्क्रॉल ट्रिगर करने के लिए।
स्क्रॉल स्थिति सेट करना: प्रोग्रामेटिक रूप से किसी खास स्थान पर स्क्रॉल करना (उदाहरण: एंकर लिंक, फॉर्म सत्यापन त्रुटि पर फोकस)।
पैरालैक्स प्रभाव: स्क्रॉल स्थिति के आधार पर पृष्ठभूमि तत्वों को एनिमेट करना।

सामान्य पैटर्न

// तत्व को शीर्ष पर स्क्रॉल करें
element.scrollTop = 0;

// तत्व को नीचे स्क्रॉल करें
element.scrollTop = element.scrollHeight;

// स्मूथ स्क्रॉल (आधुनिक API)
element.scrollTo({ top: 100, behavior: 'smooth' });