সালাম নিবেন। আশা করি আল্লাহর রহমতে ভাল আছেন সবাই। আমিও আপনাদের দোয়ায় ভাল আছি।
স্ক্রুল করতে করতে একটি ওয়েব পেজের একদম নিচে চলে গেলে সেখান থেকে আবার উপরে উঠতে যে বাটনটি ব্যবহৃত হয়, সেটিই Back to top বা Go to top বাটন নামে পরিচিত। নাম না জেনে থাকলেও অনেকেই এটা দেখেছি। বাটন বললেও এটা আসলে কোনো বাটন নয়, একটা সাধারণ লিঙ্কের মত, যেটিতে ক্লিক করলে আপনাকে একদম পেজের উপরে নিয়ে যাবে। বেশির ভাগ ভিজিটরই পেজের নিচ থেকে উপরে উঠার জন্য এটি খুঁজে থাকেন (এত কষ্ট করে স্ক্রুল করে আবার উপরে উঠতে চায় কে? যদিও সবাই আমার মত অলস না :D)। তাই এর গুরুত্বও অপরিসীম। এর উদাহরণ হিসেবে প্রথম আলোর ওয়েবসাইট দেখতে পারেন (নিচে ডান পাশে "উপরে" লিখা অংশে ক্লিক করুন)।
আমার টিউনের বিষয় হল, কিভাবে এটি আপনার ওয়েবসাইট বা ব্লগে যোগ করবেন। এর মেকানিজম নিয়ে বিস্তারিত বলব না, প্রয়োগটা দেখাব শুধু।
প্রথমে দেখাই যেকোনো ওয়েবসাইটের জন্য। এটি কয়েকভাবেই লাগানো যায়। সবচাইতে সহজ পদ্ধটিতে করতে চাইলে শুধু সিএসএস ব্যবহার করলেই চলে। জেকুয়েরীর কোনো প্রয়োজন হয়না। কিন্তু এতে প্রথম আলোর ওয়েবসাইটের স্মুথ স্ক্রুলিং হবেনা। (স্মুথ স্ক্রুলিং বুঝতে না পারলে ১ম পদ্ধতিটা আপনার সাইটে এপ্লাই করুন এবং প্রথম আলো সাইটের সাথে তুলনা করুন)। স্মুথ স্ক্রুলিং-এর জন্য আপনাকে জেকুয়েরী ব্যবহার করতেই হবে।
এই এইচটিএমএল কোডটুকু আপনার সাইটের <body> ট্যাগের পরপরই যোগ করুন-
<div id="back-to-top"></div>
এরপর এই এইচটিএমএল কোডটুকু </body> ট্যাগের পূর্বে বসান-
<div style="position:fixed;bottom:20px;right:20px;z-index:1000;"><a href="#back-to-top">TOP</a></div>
এখন দেখতে পাবেন স্ক্রীনের ডান পাশে নিচে TOP লিখা একটা লিঙ্ক আছে। আপনি পেইজের নিচেই থাকুন বা মাঝামাঝি কোথাও থাকুন না কেন, এখানে ক্লিক করার সাথে সাথে আপনি একদম উপরে চলে আসবেন।
প্রকৃতপক্ষে, এই পদ্ধতি অবলম্বন করে আরো অনেক কিছু করা যায়। প্রথমে দেওয়া কোডটুকু <body> ট্যাগের পর না বসিয়ে মাঝামাঝি বা নিচে কোথাও বসান, তারপর TOP-এ ক্লিক করে দেখুন আপনি সেখানে চলে যান কিনা! (উদাহরণঃ এখানে ক্লিক করলে আপনি টিউমেন্ট সেকশনে চলে যাবেন। সোর্স কোড খুলে দেখুন, সেখানে id="comments" নামক কিছু একটা অবশ্যই পাবেন! বুঝলেন কিছু? :D)
এখন আপনি চাইলে ২য় কোডের স্টাইল পরিবর্তন করে নিতে পারেন মন মত। আরেকটা কথা, স্মুথ স্ক্রুলিং জিনিসটা কি বুঝতে পারলেন?
এ পদ্ধতিতে হুবহু প্রথম আলোর ওয়েবসাইটের মত স্মুথ স্ক্রুলিং পাবেন। এর জন্য প্রথমেই আপনাকে ওয়েবপেইজে জেকুয়েরী লাইব্রেরী লোড করতে হবে। এজন্য নিচের <script> ট্যাগটি ওয়েবপেইজের </head> ট্যাগের পূর্বে যোগ করতে হবে।
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
এর মেকানিজম বিস্তারিত বলব না (আমি নিজেই হালকা পাতলা জানি, উলটাপালটা বলে কনফিউশনের সৃষ্টি করতে চাই না)। নিচের কোডটুকু <head> এবং </head> ট্যাগের ভিতরে বসান।
<style>
#back-to-top {
background:#0088c2;
color:#ffffff;
padding:8px 10px;
font-size:24px;
}
.back-to-top {
position:fixed !important;
position:absolute;
bottom:20px;
right:20px;
z-index:999;
}
</style>
এই কোডটুকু </body> এর পূর্বে বসান-
<div class="back-to-top">
<a href="#" id="back-to-top" title="back to top">↑</a>
</div>
<script>
$(window).scroll(function() {
if($(this).scrollTop() > 200) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top'.hide().click(function() {
$('html, body').animate({scrollTop:0}, 1000);
return false;
});
</script>
কাজ কমপ্লিট। সেইভ করে রিলোড করে দেখুন প্রথম আলো সাইটের মত হলো কিনা 😀
এটিই হল বেসিক কাজ। এখন এটা ব্লগারেই যুক্ত করুন বা ওয়ার্ডপ্রেসেই করুন, এভাবেই করতে হবে।
১ম ধাপঃ ব্লগারে লগিন করে Template সেকশনে গিয়ে Edit HTML-এ ক্লিক করুন। নতুন আসা পেইজের টেক্সটএরিয়ার মাঝখানে কোথাও ক্লিক করে Ctrl আর F এক সাথে চেপে ধরুন। টেক্সটএরিয়ার উপরে ডান পাশে সার্চ বক্স আসবে, সেখানে লিখুন jquery.min.js এবং এন্টার চাপুন। এটি আছে এমন কোনো লাইন যদি না পাওয়া যায় তাহলে নিচের কোডটি লিখতে হবে (পাওয়া গেলে আর লিখতে হবে না, ২য় ধাপে চলে যান)। এজন্য সার্চ বক্সে </head> লিখে সার্চ দিন। যে লাইনটা আসবে, তার আগের লাইনে এটি যোগ করুন-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
২য় ধাপঃ আবার সার্চ বক্সে লিখুন </b:skin> এবং এন্টার চাপুন। যে লাইনটি আসবে, তার আগে এটুকু যোগ করুন-
#back-to-top {
background:#0088c2;
color:#ffffff;
padding:8px 10px;
font-size:24px;
}
.back-to-top {
position:fixed !important;
position:absolute;
bottom:20px;
right:20px;
z-index:999;
}
৩য় ধাপঃ পুনরায় সার্চবক্সে লিখুন </body> এবং এন্টার চাপুন। হলুদ রঙের </body> লিখা লাইনের আগের লাইনে নিম্নের কোডটুকু যোগ করুন-
<div class='back-to-top'>
<a href='#' id='back-to-top' title='back to top'>↑</a>
</div>
<script>
$(window).scroll(function() {
if($(this).scrollTop() > 200) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').hide().click(function() {
$('html, body').animate({scrollTop:0}, 1000);
return false;
});
</script>
৪র্থ ধাপঃ Save template বাটনে ক্লিক করে টেমপ্লেট সেইভ করুন।
এবার আপনার ব্লগ ভিজিট করে যাচাই করুন।
আমার সকল টিউন আমার ব্লগে প্রথমে পাবলিশ করি। আমাদের প্রোগ্রামিং রিলেটেড ফেসবুক গ্রুপঃ BD Programmers Communication Help And Solution
আমি এসএমকে ইশতিয়াক। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 9 বছর 8 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 8 টি টিউন ও 145 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
