Awesome! টিউনস
সকল Awesome! টিউনস

জেকুয়েরীর সাহায্যে আপনার সাইটে যুক্ত করুন একটি Back to top বাটন (Smooth scroll)

1,364 দেখা 0 টিউমেন্টস জোসস
টিউন বিভাগ জেকোয়ারি
প্রকাশিত
Level New

8 টিউনস 145 টিউমেন্টস 1 ফলোয়ার

সালাম নিবেন। আশা করি আল্লাহর রহমতে ভাল আছেন সবাই। আমিও আপনাদের দোয়ায় ভাল আছি।

স্ক্রুল করতে করতে একটি ওয়েব পেজের একদম নিচে চলে গেলে সেখান থেকে আবার উপরে উঠতে যে বাটনটি ব্যবহৃত হয়, সেটিই 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() &gt; 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 বাটনে ক্লিক করে টেমপ্লেট সেইভ করুন।

এবার আপনার ব্লগ ভিজিট করে যাচাই করুন।

ওয়ার্ডপ্রেসে যেভাবে করবেনঃ

ওয়ার্ডপ্রেসে এই কাজের জন্য অনেক অনেক প্লাগিন আছে, তাই বিস্তারিত বললাম না। তবু ম্যানুয়ালি করতে চাইলে পূর্বের দেওয়া ২য় পদ্ধতি অনুসরণ করতে পারেন। ওয়ার্ডপ্রেস ড্যাশবোর্ডে গিয়ে Appearance > Editor এ যান, ডান পাশ থেকে Header (header.php) এবং Footer (footer.php) ফাইল দুইটি এডিট করে কোডগুলো বসান এবং সেইভ করুন।
কেউ কেউ মনে করেন, জেকুয়েরী লাইব্রেরি পেইজকে স্লো করে দেয়। যারা এমনটা করেন, তারা প্রথম পদ্ধতিই অবলম্বন করেন।
এই ছিল আমার টিউন। আশা করি সবাই বুঝতে পেরেছেন। টিউনে কোনো ভুল বা জিজ্ঞাসা থাকলে টিউমেন্ট করুন।
একটা কথা না বললেই নয়, আমার ভাবতে অবাক লাগে, টেকটিউনসের মত একটা টেকনলজি ব্লগে কোড লিখার এরকম টেরিবল অবস্থা! কোনো প্লাগিনও তো ইন্সটল দিতে হয় না, সিএসএস স্টাইলশীটে কয়েকটা ট্যাগের জন্য স্টাইল সেট করে দিলেই তো হয়ে যায়,  কোনটি সাধারণ লেখা আর কোনটি কোড, অন্তত তা চেনা যাওয়ার জন্য। উপযুক্ত কর্তৃপক্ষের দৃষ্টি আকর্ষন করছি, টিউনে কোড দিতে যেন টিউনারদের হেনস্তা না হতে হয়। সর্বশেষ যে কথাটি বলবো, আসুন আমরা কপি পেস্ট করা বর্জন করি এবং অপরকেও কপি পেস্ট টিউন করতে নিরুৎসাহিত করি (সর্বশেষ কথাটি কিন্তু সানিম মাহবীর ফাহাদ ভাইয়ের টিউন থেকে কপি করা :D)।
ভাল থাকবেন সবাই। ধন্যবাদ।

আমার সকল টিউন আমার ব্লগে প্রথমে পাবলিশ করি। আমাদের প্রোগ্রামিং রিলেটেড ফেসবুক গ্রুপঃ BD Programmers Communication Help And Solution

Level New

আমি এসএমকে ইশতিয়াক। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 10 বছর 4 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 8 টি টিউন ও 145 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস