অনেক সময় আমরা যখন একটা ওয়েবসাইট পড়ি, তখন পেজ অনেক লম্বা হয়। নিচে নামতে নামতে আবার উপরে যেতে হলে বারবার স্ক্রল করতে হয়। এই সমস্যার সমাধান হলো Scroll to Top Button। ছোট্ট একটা বোতাম, যেটা ক্লিক করলে পেজ একদম উপরে চলে যায়।

আজকে দেখাবো কীভাবে WordPress সাইটে সহজে এই বোতাম যোগ করবেন।

---

🔹 কেন Scroll to Top Button দরকার?

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

---

🔹 উপায় ১: Plugin ব্যবহার করে (Beginner Friendly)

যদি কোডিং করতে না চান, তবে প্লাগিন ব্যবহার করতে পারেন।

1. Dashboard → Plugins → Add New এ যান
2. Search করুন: “WPFront Scroll Top” অথবা “Scroll To Top Button”
3. Install → Activate করুন
4. Settings থেকে বোতামের color, position, icon কাস্টমাইজ করতে পারবেন

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

---

🔹 উপায় ২: Plugin ছাড়াই কোড দিয়ে (Lightweight)

যদি চান ওয়েবসাইট হালকা রাখতে, তাহলে সামান্য কোড ব্যবহার করতে পারেন।

HTML (footer.php এ </body> এর আগে বসান)

<a href="#" id="topBtn">⬆</a>

CSS (বোতামের ডিজাইন)

<style>
#topBtn {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  font-size: 20px;
  background: #0073e6;
  color: #fff;
  cursor: pointer;
  padding: 12px 15px;
  border-radius: 50%;
  transition: 0.3s;
}
#topBtn:hover {
  background: #005bb5;
}
</style>

JavaScript (বোতামের কাজ)

<script>
  let topBtn = document.getElementById("topBtn");
  window.onscroll = function() {
    if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
      topBtn.style.display = "block";
    } else {
      topBtn.style.display = "none";
    }
  };
  topBtn.onclick = function(e) {
    e.preventDefault();
    window.scrollTo({top: 0, behavior: 'smooth'});
  };
</script>

👉 এই কোড ব্যবহার করলে কোনো অতিরিক্ত প্লাগিন দরকার নেই।

---

🔹 কোনটা ব্যবহার করবেন?

• Beginner হলে প্লাগিনই ভালো।
• সাইটকে হালকা রাখতে চাইলে কোড মেথড ব্যবহার করুন।

---

✅ উপসংহার

Scroll to Top Button একটা ছোট্ট জিনিস হলেও ইউজার এক্সপেরিয়েন্স অনেক বাড়িয়ে দেয়। WordPress এ এটা যোগ করা একদম সহজ—চাইলে প্লাগিন দিয়ে, চাইলে কোড দিয়ে।

🚀 WordPress ওয়েবসাইটে Scroll to Top Button কিভাবে যোগ করবেন

Meta Description: ইউজার এক্সপেরিয়েন্স বাড়ানোর জন্য WordPress ওয়েবসাইটে Scroll to Top Button যোগ করা সহজ। এই গাইডে Plugin এবং Code উভয় পদ্ধতি দেখানো হয়েছে।

কেন Scroll to Top Button দরকার?

লম্বা পেজে পড়ার সময় ব্যবহারকারীরা সহজে উপরে যেতে পারে না। Scroll to Top Button এই সমস্যার সমাধান করে।

• ইউজার সহজে উপরে চলে যেতে পারে
• ওয়েবসাইট আরও প্রফেশনাল ও আধুনিক দেখায়
• লম্বা স্ক্রলিং কমায়

পদ্ধতি ১: Plugin ব্যবহার করে (Beginner Friendly)

1. Dashboard → Plugins → Add New
2. Search করুন: WPFront Scroll Top অথবা Scroll To Top Button
3. Install & Activate করুন
4. Settings → বোতামের color, position, icon কাস্টমাইজ করুন

সুবিধা: কোডের দরকার নেই, খুব সহজ।
অসুবিধা: একাধিক প্লাগিন থাকলে সাইট লোড একটু বাড়তে পারে।

পদ্ধতি ২: কোড দিয়ে (Lightweight, Plugin Free)

1️⃣ HTML

`footer.php` ফাইলের </body> ট্যাগের আগে যোগ করুন:

<a href="#" id="topBtn">⬆</a>

2️⃣ CSS

<style>
#topBtn {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  font-size: 20px;
  background: #0073e6;
  color: #fff;
  cursor: pointer;
  padding: 12px 15px;
  border-radius: 50%;
  transition: 0.3s;
}
#topBtn:hover {
  background: #005bb5;
}
</style>

3️⃣ JavaScript

<script>
let topBtn = document.getElementById("topBtn");

window.onscroll = function() {
  if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
    topBtn.style.display = "block";
  } else {
    topBtn.style.display = "none";
  }
};

topBtn.onclick = function(e) {
  e.preventDefault();
  window.scrollTo({top: 0, behavior: 'smooth'});
};
</script>

কোনটা ব্যবহার করবেন?

পদ্ধতি	সুবিধা	অসুবিধা
Plugin	সহজ, কোনো কোডিং দরকার নেই	প্লাগিন বেশি হলে সাইট লোড একটু বাড়তে পারে
Code	হালকা, দ্রুত	সরাসরি থিম ফাইল এডিট করতে হবে

উপসংহার

Scroll to Top Button ছোট হলেও ওয়েবসাইটের UX অনেক বাড়ায়।
– Beginner → Plugin ব্যবহার করুন
– Performance-conscious → কোড দিয়ে করুন

Featured Image Idea: উপরে ওয়েবপেজ স্ক্রল ইমেজ + বোতামের উপর “⬆” আইকন

⬆