Scroll Positions Track करना
In this page:
$(window).scrollTop();
$(selector).scrollTop(value);
$(selector).scrollLeft(value);
Window Scroll पढ़ना
बिना argument के $(window).scrollTop() call करना top से पूरे page के scroll हुए pixels की संख्या return करता है। यह 'back to top' button जैसी features के लिए आधार है जो user के एक certain point से आगे scroll करने पर दिखती हैं।
उदाहरण: Reading Window Scroll
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
#panel { position: relative; height: 150px; overflow: auto; border: 2px solid navy; background: #fff; margin: 8px 0; }
#tall { position: relative; height: 600px; background: repeating-linear-gradient(180deg, #eaf2fb 0 100px, #d6e6f7 100px 200px); }
#tall .tick { position: absolute; left: 0; width: 100%; border-top: 1px solid #4a7fb5; font-size: 12px; color: #2c6aa0; padding-left: 6px; }
#target { position: absolute; top: 340px; left: 10px; right: 10px; padding: 8px 10px; background: gold; border: 2px solid #b8860b; font-weight: bold; }
.hint { font-size: 13px; color: #555; margin: 4px 0; }
</style>
</head>
<body>
<button id="runBtn">Read scrollTop()</button><button id="resetBtn" class="secondary">Reset</button>
<p class="hint">Scroll inside the box first, then press the button.</p>
<div id="panel"><div id="tall"><div class="tick" style="top:0px">0 px</div><div class="tick" style="top:100px">100 px</div><div class="tick" style="top:200px">200 px</div><div class="tick" style="top:300px">300 px</div><div class="tick" style="top:400px">400 px</div><div class="tick" style="top:500px">500 px</div></div></div>
<div id="output"></div>
<script>
function pos() { return "#panel scrollTop() = " + $("#panel").scrollTop() + " (max " + ($("#panel")[0].scrollHeight - $("#panel").innerHeight()) + ")"; }
$("#runBtn").click(function () {
$("#output").text(pos() + "\n$(window).scrollTop() = " + $(window).scrollTop() + " (the whole page)");
});
$("#resetBtn").click(function () {
$("#panel").scrollTop(0);
$("#output").text("");
});
</script>
</body>
</html>
Element Scroll पढ़ना
scrollTop() सिर्फ window पर नहीं, individual scrollable elements पर भी काम करता है, यह return करते हुए कि उस specific element का content कितना scroll हुआ है। यह अपनी independent scroll position वाले किसी scrollable panel या chat box के लिए उपयोगी है।
उदाहरण: Reading Element Scroll
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
#panel { position: relative; height: 150px; overflow: auto; border: 2px solid navy; background: #fff; margin: 8px 0; }
#tall { position: relative; height: 600px; background: repeating-linear-gradient(180deg, #eaf2fb 0 100px, #d6e6f7 100px 200px); }
#tall .tick { position: absolute; left: 0; width: 100%; border-top: 1px solid #4a7fb5; font-size: 12px; color: #2c6aa0; padding-left: 6px; }
#target { position: absolute; top: 340px; left: 10px; right: 10px; padding: 8px 10px; background: gold; border: 2px solid #b8860b; font-weight: bold; }
.hint { font-size: 13px; color: #555; margin: 4px 0; }
</style>
</head>
<body>
<button id="runBtn">Read #panel scrollTop()</button><button id="resetBtn" class="secondary">Reset</button>
<p class="hint">Scroll the panel with your mouse or scrollbar, then press the button.</p>
<div id="panel"><div id="tall"><div class="tick" style="top:0px">0 px</div><div class="tick" style="top:100px">100 px</div><div class="tick" style="top:200px">200 px</div><div class="tick" style="top:300px">300 px</div><div class="tick" style="top:400px">400 px</div><div class="tick" style="top:500px">500 px</div></div></div>
<div id="output"></div>
<script>
function pos() { return "#panel scrollTop() = " + $("#panel").scrollTop() + " (max " + ($("#panel")[0].scrollHeight - $("#panel").innerHeight()) + ")"; }
$("#runBtn").click(function () { $("#output").text(pos()); });
$("#resetBtn").click(function () {
$("#panel").scrollTop(0);
$("#output").text("");
});
</script>
</body>
</html>
Scroll Position Set करना
scrollTop() एक pixel value pass करके vertical scroll position set कर सकता है, page या element को तुरंत उस position पर move करते हुए। jQuery के animate() के साथ combined, यह smooth scrolling effect बनाने का तरीका भी है।
उदाहरण: Setting Scroll Position
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
#panel { position: relative; height: 150px; overflow: auto; border: 2px solid navy; background: #fff; margin: 8px 0; }
#tall { position: relative; height: 600px; background: repeating-linear-gradient(180deg, #eaf2fb 0 100px, #d6e6f7 100px 200px); }
#tall .tick { position: absolute; left: 0; width: 100%; border-top: 1px solid #4a7fb5; font-size: 12px; color: #2c6aa0; padding-left: 6px; }
#target { position: absolute; top: 340px; left: 10px; right: 10px; padding: 8px 10px; background: gold; border: 2px solid #b8860b; font-weight: bold; }
.hint { font-size: 13px; color: #555; margin: 4px 0; }
</style>
</head>
<body>
<button id="runBtn">scrollTop(300)</button><button id="topBtn">scrollTop(0)</button><button id="bottomBtn">Scroll to bottom</button><button id="resetBtn" class="secondary">Reset</button>
<div id="panel"><div id="tall"><div class="tick" style="top:0px">0 px</div><div class="tick" style="top:100px">100 px</div><div class="tick" style="top:200px">200 px</div><div class="tick" style="top:300px">300 px</div><div class="tick" style="top:400px">400 px</div><div class="tick" style="top:500px">500 px</div></div></div>
<div id="output"></div>
<script>
function pos() { return "#panel scrollTop() = " + $("#panel").scrollTop() + " (max " + ($("#panel")[0].scrollHeight - $("#panel").innerHeight()) + ")"; }
$("#runBtn").click(function () { $("#panel").scrollTop(300); $("#output").text("scrollTop(300) -> " + pos()); });
$("#topBtn").click(function () { $("#panel").scrollTop(0); $("#output").text("scrollTop(0) -> " + pos()); });
$("#bottomBtn").click(function () {
$("#panel").scrollTop($("#panel")[0].scrollHeight);
$("#output").text("scrollTop(scrollHeight) -> " + pos());
});
$("#resetBtn").click(function () { $("#panel").scrollTop(0); $("#output").text(""); });
</script>
</body>
</html>
उदाहरण: Scroll to Top and Bottom Buttons
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
#panel { position: relative; height: 150px; overflow: auto; border: 2px solid navy; background: #fff; margin: 8px 0; }
#tall { position: relative; height: 600px; background: repeating-linear-gradient(180deg, #eaf2fb 0 100px, #d6e6f7 100px 200px); }
#tall .tick { position: absolute; left: 0; width: 100%; border-top: 1px solid #4a7fb5; font-size: 12px; color: #2c6aa0; padding-left: 6px; }
#target { position: absolute; top: 340px; left: 10px; right: 10px; padding: 8px 10px; background: gold; border: 2px solid #b8860b; font-weight: bold; }
.hint { font-size: 13px; color: #555; margin: 4px 0; }
</style>
</head>
<body>
<button id="runBtn">Scroll to Top</button><button id="bottomBtn">Scroll to Bottom</button><button id="resetBtn" class="secondary">Reset</button>
<p class="hint">Scroll down inside the panel, then use the buttons.</p>
<div id="panel"><div id="tall"><div class="tick" style="top:0px">0 px</div><div class="tick" style="top:100px">100 px</div><div class="tick" style="top:200px">200 px</div><div class="tick" style="top:300px">300 px</div><div class="tick" style="top:400px">400 px</div><div class="tick" style="top:500px">500 px</div></div></div>
<div id="output"></div>
<script>
function pos() { return "#panel scrollTop() = " + $("#panel").scrollTop() + " (max " + ($("#panel")[0].scrollHeight - $("#panel").innerHeight()) + ")"; }
$("#panel").on("scroll", function () { $("#output").text(pos()); });
$("#runBtn").click(function () {
$("#panel").stop(true).animate({scrollTop: 0}, 400);
});
$("#bottomBtn").click(function () {
$("#panel").stop(true).animate({scrollTop: $("#panel")[0].scrollHeight}, 400);
});
$("#resetBtn").click(function () { $("#panel").stop(true).scrollTop(0); });
$("#output").text(pos());
</script>
</body>
</html>
Scroll Events
scroll event तब fire होता है जब भी कोई scrollable area -- window या कोई individual element -- position बदलता है, आपको user के scroll करने पर react करने देते हुए। क्योंकि यह बहुत बार fire हो सकता है, scroll handlers को अक्सर हर pixel movement पर costly काम करने से बचने के लिए throttle किया जाता है।
उदाहरण: Scroll Events
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
#panel { position: relative; height: 150px; overflow: auto; border: 2px solid navy; background: #fff; margin: 8px 0; }
#tall { position: relative; height: 600px; background: repeating-linear-gradient(180deg, #eaf2fb 0 100px, #d6e6f7 100px 200px); }
#tall .tick { position: absolute; left: 0; width: 100%; border-top: 1px solid #4a7fb5; font-size: 12px; color: #2c6aa0; padding-left: 6px; }
#target { position: absolute; top: 340px; left: 10px; right: 10px; padding: 8px 10px; background: gold; border: 2px solid #b8860b; font-weight: bold; }
.hint { font-size: 13px; color: #555; margin: 4px 0; }
</style>
</head>
<body>
<button id="resetBtn">Scroll back to top</button>
<p class="hint">Scroll the panel: the scroll event updates the output below.</p>
<div id="panel"><div id="tall"><div class="tick" style="top:0px">0 px</div><div class="tick" style="top:100px">100 px</div><div class="tick" style="top:200px">200 px</div><div class="tick" style="top:300px">300 px</div><div class="tick" style="top:400px">400 px</div><div class="tick" style="top:500px">500 px</div></div></div>
<div id="output">Scroll the panel above...</div>
<script>
var count = 0;
$("#panel").on("scroll", function () {
count++;
$("#output").text("scroll event #" + count + "\nscrollTop() = " + $(this).scrollTop());
});
$("#resetBtn").click(function () { $("#panel").scrollTop(0); });
</script>
</body>
</html>
किसी Element तक Scroll करना
आप किसी element के offset() coordinates को scrollTop() के साथ combine करके page को इस तरह move कर सकते हैं कि एक specific element view में आ जाए। यह 'jump to section' links और smooth-scrolling navigation menus के पीछे की basic technique है।
उदाहरण: Scroll to an Element
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
#panel { position: relative; height: 150px; overflow: auto; border: 2px solid navy; background: #fff; margin: 8px 0; }
#tall { position: relative; height: 600px; background: repeating-linear-gradient(180deg, #eaf2fb 0 100px, #d6e6f7 100px 200px); }
#tall .tick { position: absolute; left: 0; width: 100%; border-top: 1px solid #4a7fb5; font-size: 12px; color: #2c6aa0; padding-left: 6px; }
#target { position: absolute; top: 340px; left: 10px; right: 10px; padding: 8px 10px; background: gold; border: 2px solid #b8860b; font-weight: bold; }
.hint { font-size: 13px; color: #555; margin: 4px 0; }
</style>
</head>
<body>
<button id="runBtn">Jump to target</button><button id="animBtn">Animate to target</button><button id="resetBtn" class="secondary">Reset</button>
<div id="panel"><div id="tall"><div class="tick" style="top:0px">0 px</div><div class="tick" style="top:100px">100 px</div><div class="tick" style="top:200px">200 px</div><div class="tick" style="top:300px">300 px</div><div class="tick" style="top:400px">400 px</div><div class="tick" style="top:500px">500 px</div><div id="target">Target section</div></div></div>
<div id="output"></div>
<script>
function targetTop() { return $("#target").offset().top - $("#tall").offset().top; }
$("#runBtn").click(function () {
var top = targetTop();
$("#panel").scrollTop(top);
$("#output").text("target is " + top + "px from the top of the content\nscrollTop() is now " + $("#panel").scrollTop());
});
$("#animBtn").click(function () {
var top = targetTop();
$("#output").text("animating to " + top + "px...");
$("#panel").stop(true).animate({scrollTop: top}, 500, function () {
$("#output").text("arrived: scrollTop() = " + $("#panel").scrollTop());
});
});
$("#resetBtn").click(function () { $("#panel").stop(true).scrollTop(0); $("#output").text(""); });
</script>
</body>
</html>
- किसी scrollable न होने वाले element पर
$("#panel").scrollTop()call करना, जो हमेशा 0 return करता है क्योंकि इसेoverflow:autoयाscrollचाहिए। - एक बार
scrollTop()पढ़ना और इसके update होने की उम्मीद करना, जबकि इसे एकscrollevent handler के अंदर दोबारा पढ़ना ज़रूरी है। - कुछ browsers में page के लिए
$("body").scrollTop()इस्तेमाल करना, जबकि$(window).scrollTop()भरोसेमंद form है।
- jQuery elements पर CSS rules get और set करता है और classes manage करता है।
- यह element width, height, और inner व outer dimensions पढ़ता है।
- यह element coordinates भी report करता है और scroll positions track करता है।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: