জেকুয়েরি scrollTop() মেথড
« জেকুয়েরি এইচটিএমএল/ সিএসএস মেথড
সংজ্ঞা এবং ব্যবহার
scrollTop() মেথড নির্বাচিত এলিমেন্টের জন্য উলম্ব স্ক্রলবার অবস্থান সেট করে অথবা রিটার্ন করে ।
পরামর্শঃ যখন স্ক্রলবার একেবারে উপড়ে থাকে । তখন অবস্থান থাকে শূন্য 0.
যখন অবস্থার রিটার্ণ করতে ব্যবহার হয় :
এই মেথড প্রথম মিলকৃত এলিমেন্টের জন্য স্ক্রলবারে উলম্ব অবস্থান রিটার্ণ করে
যখন অবস্থান সেট করতে ব্যবহার করতে ব্যবহার করা হয় :
এই মেথড সকল মিলকৃত এলিমেন্টের জন্য স্ক্রলবারে উলম্ব অবস্থান রিটার্ণ করে
সিনট্যাক্স
উলম্ব স্ক্রলবারের অবস্থান রিটার্ণ করে:
$(selector).scrollTop()
উলম্ব স্ক্রলবারের অবস্থান সেট করে:
$(selector).scrollTop( অবস্থান)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে scrollTop() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বর্নণা |
|---|---|
অবস্থান |
উলম্ব স্ক্রলবারের অবস্থান pixels এ রিটার্ন করে |
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("div").scrollTop() + " px");
});
});
</script>
</head>
<body>
<div style="border:1px solid black;width:100px;height:150px;overflow:auto">
এগুলো সাধারন কিছু টেক্সট। এগুলো সাধারন কিছু টেক্সট। এগুলো সাধারন কিছু টেক্সট। এগুলো সাধারন কিছু টেক্সট। এগুলো সাধারন কিছু টেক্সট। এগুলো সাধারন কিছু টেক্সট। এগুলো সাধারন কিছু টেক্সট। এগুলো সাধারন কিছু টেক্সট। এগুলো সাধারন কিছু টেক্সট। এগুলো সাধারন কিছু টেক্সট। এগুলো সাধারন কিছু টেক্সট। এগুলো সাধারন কিছু টেক্সট। এগুলো সাধারন কিছু টেক্সট।</div><br>
<button>স্ক্রলবারের ভার্টিক্যাল অবস্থান রিটার্ন করুন</button>
<p>স্ক্রলবারকে নিচে মুভ করুন এবং পূনরায় বাটনে ক্লিক করুন।</p>
</body>
</html>
ফলাফল
উদাহরণ
উলম্ব স্ক্রল্অবার অবস্থান সেট করে
একটি এলিমেন্টের জন্য কিভাবে উলম্ব স্ক্রল্অবার অবস্থান সেট করে ।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").scrollTop(100);
});
});
</script>
</head>
<body>
<div style="border:1px solid black;width:100px;height:150px;overflow:auto">
আমার সোনার বাংলা ,আমি তোমায় ভালোবাসি।আমার সোনার বাংলা ,আমি তোমায় ভালোবাসি।আমার সোনার বাংলা ,আমি তোমায় ভালোবাসি।আমার সোনার বাংলা ,আমি তোমায় ভালোবাসি।আমার সোনার বাংলা ,আমি তোমায় ভালোবাসি।আমার সোনার বাংলা ,আমি তোমায় ভালোবাসি। </div><br>
<button>100px উল্লম্ব স্ক্রলভার(scrollbar) অবস্থান সেট করুন</button>
</body>
</html>
ফলাফল
বিভিন্ন স্ক্রল অবস্থানের উপর ক্লাসের মধ্যে টগল করুন ।
কিভবে বিভিন্ন স্ক্রল অবস্থানের উপর ক্লাসের মধ্যে টগল করা যায় ।
পেইজ এ স্মোথা স্ক্রলিং যুক্ত করনউদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(function() {
if ($(document).scrollTop() > 45) {
$("p").addClass("test");
} else {
$("p").removeClass("test");
}
});
});
</script>
<style>
.test {
background-color: yellow;
}
</style>
</head>
<body style="height:1550px;">
<p>পেজটিকে নিচের দিকে স্ক্রল করুন।</p>
<p style="position:fixed;">যখন আপনি উপর থেকে নিচের দিকে 45px স্ক্রল করবেন, তখন প্যারাগ্রাফে "test" ক্লাস যুক্ত হবে (হলুদ ব্যাকগ্রাউন্ড কালার)। ক্লাস রিমুভ করার জন্য পূনরায় উপরের দিকে স্ক্রল করুন।</p>
</body>
</html>
ফলাফল
পেইজ এ স্মোথা স্ক্রলিং যুক্ত করন
লিঙ্কের মসৃণ স্ক্রলিং যোগ করার জন্য animate() একসঙ্গে scrollTop() ব্যবহার করা
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// সকল লিংকে স্মুথ স্ক্রলিং যুক্ত
$("a").on('click', function(event) {
// ডিফল্ট আচর ওভাররাইট করার আগে নিশ্চিত হোন যে this.hash এ ভ্যালু আছে
if (this.hash !== "") {
// ডিফল্ট এংকর ক্লিক আচরন প্রতোরোধ
event.preventDefault();
// হ্যাশ স্টোর
var hash = this.hash;
// স্মুথ পেজ স্ক্রলের জন্য জেকুয়েরির animate() মেথডের ব্যবহার
// অতিরিক্ত সংখ্যে (800) দ্বারা স্মুথ স্ক্রলিংয়ের সময়কে নির্ধারণ করা হয়
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// যখন স্ক্রলিং শেষ হয় তখন আবার URL এ hash (#) যুক্ত করে (ডিফল্ট ক্লিক আচরন)
window.location.hash = hash;
});
} // End if
});
});
</script>
<style>
body, html, .main {
height: 100%;
}
section {
min-height: 100%;
}
</style>
</head>
<body>
<a href="#section2">নিচের ২ নাম্বার সেকশনে স্মুথভাবে স্ক্রলিং করার জন্য এখানে ক্লিক করুন</a>
<div class="main">
<section></section>
</div>
<div class="main" id="section2">
<section style="background-color:blue"></section>
</div>
</body>
</html>
ফলাফল
« জেকুয়েরি এইচটিএমএল/ সিএসএস মেথড