শীর্ষে ফিরে যাওয়া বাটন কিভাবে তৈরি করা যায়

শীর্ষে যাওয়া বাটন কিভাবে তৈরি করা যায়

প্রথম পদক্ষেপ - HTML যোগ করুন:

একটি বাটন তৈরি করুন যা ক্লিক করলে ব্যবহারকারীকে পাতার শীর্ষে নিয়ে যাবে:

<button onclick="topFunction()" id="myBtn" title="শীর্ষে যান">শীর্ষ</button>

দ্বিতীয় পদক্ষেপ - CSS যোগ করুন:

বুটনের স্টাইল সেট করুন:

#myBtn {
  display: none; /* ডিফল্টে লুকানো */
  position: fixed; /* ফিক্সড/স্টিকি পোজিশন */
  bottom: 20px; /* পেজের নীচে 20px দূরে বুটন রাখুন */
  right: 30px; /* পেজের ডানদিকে 30px দূরে বুটন রাখুন */
  z-index: 99; /* এটা অন্য থিংগুলির ওপর না অবরোধ করে */
  border: none; /* বোর্ডার মিটানো */
  outline: none; /* আউটলাইন মিটানো */
  background-color: red; /* পিছনভূমি রঙ সেট করুন */
  color: white; /* টেক্সট কালিরঙ্গা */
  cursor: pointer; /* হভিংয়ের সময় মাউস পিন্টার যোগ করুন */
  padding: 15px; /* কিছু ইনার প্যাডিং */
  border-radius: 10px; /* বোর্ডার রেডিয়াস */
  font-size: 18px; /* ফন্ট সাইজ বাড়ানো */
}
#myBtn:hover {
  background-color: #555; /* মাউস হভিংয়ের সময় গাঢ় গোলাপী পিছনভূমি যোগ করুন */
}

তৃতীয় পদক্ষেপ - জেইস্ক্রিপ্ট যোগ করুন:

// বুটন পাওয়া:
let mybutton = document.getElementById("myBtn");
// ব্যবহারকারী ডকুমেন্টের শীর্ষ থেকে 20px নিচে সরল হলে, এই বুটন দেখানো হবে
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// ব্যবহারকারী বুটন ক্লিক করলে, ডকুমেন্টের শীর্ষে ফিরে যায়
function topFunction() {
  document.body.scrollTop = 0; // স্যাফারির জন্য
  document.documentElement.scrollTop = 0; // চ্রোম, ফায়ারফক্স, আইই এবং ওপেরা ব্রাউজারের জন্য
}

亲自试一试