স্মুথ স্ক্রলিং ব্যবহার করে পেজের ভিতরের লিংকে ক্লিক করলে আকস্মিক জাম্প না হয়ে মুলায়মভাবে স্ক্রল হয়। এটি `scroll-behavior: smooth` প্রোপার্টি দিয়ে খুব সহজে করা যায়।
উদাহরণ: স্মুথ স্ক্রল
<!DOCTYPE html>
<html>
<head>
<style>
html {
scroll-behavior: smooth;
}
* {
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0px;
padding: 0px;
}
#firstSection {
height: 100vh;
background-color: rgb(119, 77, 219);
color: white;
padding: 20px;
}
#secondSection {
height: 100vh;
color: white;
background-color: rgb(42, 128, 168);
padding: 20px;
}
a {
text-decoration: none;
font-size: 20px;
font-weight: bold;
color: yellow;
}
</style>
</head>
<body>
<h1>স্মুথ স্ক্রল উদাহরণ</h1>
<div id="firstSection">
<h2>সেকশন ১</h2>
<p>লিংকে ক্লিক করে "স্মুথ" স্ক্রলিং ইফেক্ট দেখুন।</p>
<a href="#secondSection">এখানে ক্লিক করুন সেকশন ২-এ স্মুথ স্ক্রল করার জন্য</a>
</div>
<div id="secondSection">
<h2>সেকশন ২</h2>
<a href="#firstSection">এখানে ক্লিক করুন সেকশন ১-এ স্মুথ স্ক্রল করার জন্য</a>
</div>
</body>
</html>
কোড ব্যাখ্যা
- html { scroll-behavior: smooth; }: এটি পুরো ডকুমেন্টের জন্য স্মুথ স্ক্রল সক্রিয় করে।
- id="firstSection" এবং id="secondSection": এই আইডিগুলো.Anchor লিংকের টার্গেট হিসেবে কাজ করে।
- height: 100vh: প্রতিটি সেকশন ফুল স্ক্রিন উচ্চতার করে স্ক্রলিং স্পষ্ট দেখা যায়।
ব্রাউজার সাপোর্ট
আধুনিক সব ব্রাউজার (Chrome, Firefox, Safari, Edge) এই প্রোপার্টি সাপোর্ট করে। পুরনো ব্রাউজার ফলব্যাক হিসেবে ডিফল্ট জাম্পিং ব্যবহার করবে।
