Jquery ব্যবহার করে 'উপরে ফিরে আসুন' বোতাম তৈরি করার পদ্ধতি

আমরা এর আগে 'উপরে ফিরে আসুন' (Back to top) জাতীয় বোতাম (Button) ব্লগে স্থাপন করার পদ্ধতি জেনেছিলাম। সেই পদ্ধতিটি যেভাবে তৈরি করা হয়েছে, এবারের পদ্ধতিটি তার চাইতে কিছুটা আলাদা। এই নতুন বোতামটি ব্লগের উপরে থাকা অবস্থায় দেখা যায় না। লুকিয়ে থাকে (Hide)। স্ক্রল (Scroll) করে ব্লগের একটু নিচের দিকে নামলেই ভেসে ওঠে। তখন দেখা যায়। শুধু তাই নয়। আগের বোতামটির উপরে ক্লিক করলে এক লাফে ব্লগের উপরে চলে আসতো। কিন্তু এই নতুন বোতামটিতে ক্লিক করলে কিছুটা ধীরে ধীরে ব্লগের উপরে চলে আসা যায়। এই কাজটি করা হয়েছে JQuery Code দিয়ে। কয়েকটি ছোট কোড স্থাপন করে আমরা নিজেদের ব্লগে এই ধরণের একটি বোতাম স্থাপন করতে পারি। আগের বোতামটি তৈরিতে আমরা ছোটসাইজের উর্ধমুখী (Up) তীরচিহ্নযুক্ত ছবি (Image) ব্যবহার করেছিলাম। কিন্তু এবার আর তা করবো না। এবার টেক্সট (Text) দিয়েই কাজ সারবো।

• ব্লগার.কম (Blogger.com) এ গুগল আইডি ও পাসওয়ার্ড (Google ID and Password) দিয়ে প্রবেশ করুন।
• Layout> Edit HTML পাতায় যান। এখানে
  
• এবার ]]></b:skin> লেখাটির উপরে নিচের কোডটি স্থাপন করুন।
• 
  

  /* to top */
  #toTop { width:100px;background:#00FFFF;border:1px solid #000;text-align:center;
  padding:2px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#000;text-decoration:none; }
  

  
  
• এবার </head> এর উপরে নিচের কোডটি স্থাপন করুন।
• 
  

  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
  <script type='text/javascript'>
  /*-----------------------
  * jQuery Plugin: Scroll to Top
  * by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
  * Bring to you by: http://www.banglahacks.com
  * Copyright (c) 2009 Ph.Creative Ltd.
  * Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
  * For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
  * Do not delete these infomation
  * Version: 1.0, 12/03/2009
  -----------------------*/
  
  $(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
  
  $(function() {
  $("#toTop").scrollToTop();
  });
  </script>
  

  
  
• এবার HTML পাতাটির একেবারে নিচে চলে যান।
• এখানে </body> লেখাটির ঠিক উপরে নিচের কোডটি স্থাপন করুন।
• 
  

  <a href="#" id="toTop">^ Back to Top</a>
  

  
  
• SAVE করুন।
• অন্য ট্যাবে থাকা (ফায়ারফক্সে, ডাউনলোড করুন) আপনার ব্লগটিকে একবার রিফ্রেশ করুন। দেখুনতো পরিবর্তনটি চোখে পড়ে কিনা?