স্মুথ স্ক্রল বর্তমানে খুবই পপুলার একটা ফিচার। এখন অনেক সাইটেই স্মুথ স্ক্রল ব্যবহার করতে দেখা যায়। পেজের কোন লিঙ্কে ক্লিক করলে যখন আস্তে আস্তে ইউজার পেজের নিচের দিকে চলে আসে সেই অপশনটির নাম হল স্মুথ স্ক্রল। যদি কেউ আগে থেকে না জেনে থাকেন আশা করি এতক্ষনে বুঝে গেছেন।

বেশিরভাগ ক্ষেত্রে সিঙ্গেল ল্যান্ডিং পেজে এটি দেখা যায় যেখানে সব সেকশন একসাথে থাকে এবং সেগুলো # দিয়ে লিংক করা। অবশ্যই জেনে থাকবেন যে # দিয়ে শুধুমাত্র পেজের ভিতরে লিংক করা হয় যাতে পেজের ভিতর নেভিগেশন সহজ হয়। আমি যেই স্মুথ স্ক্রল আজ দেখাবো তার মূল কোড জাভাস্ক্রিপ্টে তবে খুব সহজেই এইচটিএমএল -এ ব্যবহার করা যায়।

পদ্ধতিটা খুবই সহজ, প্রথমে পেজের সব দরকারি লিংকে আইডি দিয়ে দিতে হবে নেভিগেশনের জন্য যেগুলো মেনুর সাথে লিংক করা থাকবে। যাতে করে মেনু থেকে ক্লিক করলে ওয়েবপেজের অবস্থান সেই জায়গায় চলে আসে। এই কাজটা আমি আমার আগে কনভার্ট করা একটা সাইটে করে দেখাবো।

প্রথমে যেই ডিভ বা সেকশন দরকার সেটাতে একটা করে আইডি দিতে হবে।

এখন নেভিগেশন মেনুতে সেই আইডিগুলোকে টারগেট করে দিতে হবে।

সেফ সাইডে থাকার জন্য একবার দেখে নেয়া যাক লিংকগুলো ঠিকমত বসানো হয়েছে কিনা। যদি হয়ে থাকে তাহলে এখন স্মুথ স্ক্রলিং এনাবল করতে হবে। এটা করার জন্য এই কোডটি আপনার এইচটিএমএল ফাইলের বডি শেষ এর আগে বসাতে হবে।

//enabling smooth scroll
$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

এই কোডটা আমার না। আমি এটা পেয়েছি সিএসএস ট্রিক্স থেকে। যাই হোক কিভাবে এটা করতে হবে তার প্রসেসটা আমি == এ দিয়েছি,  দেখতে পারেন।