JavaScript এবং CSS দিয়ে পেজের নিচে স্মুথ স্ক্রোল করার পদ্ধতি

JavaScript এবং একটু CSS দিয়ে লম্বা ওয়েব পেজের নিচে ইউজারকে স্মুথলি স্ক্রোল করার পদ্ধতি শিখুন।

আপনি যদি আপনার ইউজারদের পেজের নিচে স্মুথলি স্ক্রোল করার ক্ষমতা দিতে চান, তবে আপনি একটি CSS প্রোপার্টি scroll-behavior এবং একটি JavaScript মেথড scrollIntoView() ব্যবহার করতে পারেন।

আপনাকে নিচের জিনিসগুলো দরকার:

• একটি লম্বা ওয়েব পেজ যথেষ্ট কন্টেন্টসহ যাতে ব্রাউজারের ডানে y-অক্ষ স্ক্রোলবার এক্টিভ হয়
• পেজের উপরে একটি অ্যাঙ্কর এলিমেন্ট একটি id সহ
• পেজের নিচে যেকোনো এলিমেন্ট একটি id সহ
• scroll-behavior CSS প্রোপার্টি
• scrollIntoView() JavaScript প্রোপার্টি

উদাহরণ দিয়ে শিখি!

HTML লে‌আউট উদাহরণ

নিচের HTML মার্কআপ উদাহরণটি ব্যবহার করতে পারেন শিখতে (বিনামূল্যে <p>....</p> ডামি এলিমেন্টগুলো আসল কন্টেন্ট দিয়ে রিপ্লেস করতে পারেন):

<main> <p><a id="scroll-to-bottom">Scroll to bottom</a></p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p>....</p> <p id="page-bottom">You have reached the bottom of this page!!</p> </main>

লক্ষ্য করুন, উপরে একটি অ্যাঙ্কর এলিমেন্ট <a> আছে scroll-to-bottom আইডি সহ, এবং নিচে একটি এলিমেন্ট আছে page-bottom আইডি সহ।

CSS

স্মুথ স্ক্রোল এক্টিভেট করতে, আপনার CSS স্টাইলশিটে নিচের কোডটি যোগ করুন:

html { scroll-behavior: smooth; } /* Layout */ main { max-width: 700px; margin: 3rem auto; padding: 0 1rem; } #scroll-to-bottom { font-weight: bold; color: green; }

নোট: স্ক্রোল ম্যাজিক আসে scroll-behavior: smooth; থেকে, বাকি CSS স্টাইলিং শুধু কসমেটিক।

JavaScript

যখন ইউজার Scroll to Bottom-এ ক্লিক করবে তখন উপর থেকে নিচে স্মুথলি স্ক্রোল করাতে নিচের JavaScript কোডটি যোগ করুন:

let scrollToBottom = document.querySelector("#scroll-to-bottom") let pageBottom = document.querySelector("#page-bottom") scrollToBottom.addEventListener("click", function() { pageBottom.scrollIntoView() })

JavaScript কোডটি কীভাবে কাজ করে

• প্রথমে আমরা দুটি ভেরিয়েবল ডিক্লেয়ার করি scroll-to-bottom এবং page-bottom রেফারেন্স করার জন্য।
• তারপর আমরা scrollToBottom ভেরিয়েবলে একটি ইভেন্ট লিসেনার আটাচ করি এবং নির্দিষ্ট করে বলি click events লিসেন করতে।
• function() { .. } এর ভিতরে আমরা scrollIntoView() মেথড আটাচ করি পেজ বটম এলিমেন্ট pageBottom-এ।

এখন যেকোনো কেউ scroll to bottom-এ ক্লিক করলে ফাংশনটি scrollIntoView মেথড এক্সিকিউট করবে এবং ইউজারকে নিচে স্ক্রোল করাবে যেখানে page-bottom আইডি অবস্থিত।

নোট: আপনি যদি scroll-behavior: smooth; রিমুভ করেন, স্ক্রোল টেকনিক্যালি হবে, কিন্তু এটি হঠাৎ হবে।

আপনি পিউর ভ্যানিলা JavaScript-ও স্মুথ স্ক্রোল করতে পারেন (কোনো CSS প্রোপার্টি ছাড়া) কিন্তু এতে এই উদাহরণের চেয়ে অনেক বেশি কোড লাগবে।

সকল ডেমো কোড চেক করুন।

বাস্তব জীবনে scroll to bottom কীভাবে উপকারী?

একটি ইউজ কেস যা মনে পড়ে হলো ভিজিটরদের দ্রুত একটি লম্বা কন্টেন্টের সার্মারি স্ক্রোল করার সুযোগ দেওয়া যেনা তারা এখন পড়তে পারেন না।

ব্রাউজার কম্প্যাটিবিলিটি

scroll-behavior CSS প্রোপার্টি ইন্টারনেট এক্সপ্লোরার বা সাফারির সাথে কম্প্যাটিবল নয়। সেসব ব্রাউজারের জন্য আপনাকে পিউর JavaScript সমাধান লাগবে।