TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে আপনার ওয়েবসাইটের জন্য শীর্ষ উইজেটে স্ক্রোল তৈরি করবেন?

25

উপরের দিকে ফিরে যান বা উপরের দিকে স্ক্রোল করুন বৈশিষ্ট্যটি আপনাকে পৃষ্ঠার নীচের ডান কোণার কাছে সাধারণত একটি তীরের উপর ক্লিক করে পৃষ্ঠার শীর্ষে যেতে দেয়। এই ধরনের স্ক্রল টু টপ ফিচারের জন্য সবসময় ইমেজ ব্যবহার করার প্রয়োজন হয় না। যেহেতু প্রতিটি ছবি আপনার সার্ভারে একটি পৃথক HTTP অনুরোধ পাঠায় এটি সামগ্রিক সাইট লোড করার সময় যোগ করবে এবং ছবিটি কাস্টমাইজ করাও খুব সহজ নয়। এটি কাটিয়ে ওঠার জন্য আমরা নীচের স্ক্রলটি সিএসএস এবং jQuery সহ উপরের উইজেটে ইমেজের পরিবর্তে ফন্ট অসাধারণ আইকন দিয়ে অফার করি যাতে আপনি আপনার সাইটের লেআউট অনুসারে কাস্টমাইজ করতে পারেন।

সম্পর্কিত: ওয়েবলি সাইটে শীর্ষ উইজেটে স্ক্রোল কীভাবে যুক্ত করবেন?

উইজেটটিতে তিনটি অংশ রয়েছে:

  • সিএসএস
  • লিপি
  • এইচটিএমএল

ব্যাক টু টপ উইজেটের জন্য 1 সিএসএস কোড

নীচে উইজেটের জন্য CSS কোড আছে এবং এটি আপনার সাইটের হেডার বিভাগে পেস্ট করুন।

<style> .backtotop { background: none; margin: 0; position: fixed; bottom: 0; right: 0; width: 55px; height: 60px; z-index: 100; display: none; text-decoration: none; color: #808080; } .backtotop i { font-size: 50px; } </style> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

দ্রষ্টব্য: ছবির পরিবর্তে আমরা ফন্ট অসাধারণ আইকন ব্যবহার করি, অতএব প্রয়োজনীয় সিএসএস সেই অনুযায়ী লিঙ্ক করা হয়।

উইজেটের জন্য 2 jQuery স্ক্রিপ্ট

নীচে উইজেটের স্ক্রিপ্ট যা আপনার সাইটের পাদলেখ বিভাগে স্থাপন করা প্রয়োজন।

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $(document).ready(function() { $('.backtotop').css({'display': 'none'}); var offset = 200; var duration = 600; $(window).scroll(function() { if ($(this).scrollTop() > offset) { $('.backtotop').fadeIn(duration); } else { $('.backtotop').fadeOut(duration); } }); $('.backtotop').click(function(event) { event.preventDefault(); $('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script>

উইজেটের জন্য 3 টি এইচটিএমএল

এবং অবশেষে নীচে HTML কোডটি আপনার ওয়েব পৃষ্ঠার মূল অংশের ভিতরে রাখা হবে যাতে ব্যাক টু টপ ফাংশন সক্ষম হয়।

<a href="#" class="backtotop" style="display: inline;"> <i class="fa fa-arrow-circle-up"></i> </a>

কাস্টমাইজ ব্যাক টু টপ ফিচার

এই উইজেট ব্যবহার করার সুবিধা হল আপনি আপনার প্রয়োজন অনুযায়ী সম্পূর্ণ ফাংশন কাস্টমাইজ করতে পারেন। এখানে আপনার জন্য কিছু কাস্টমাইজেশন বিকল্প রয়েছে:

স্ক্রোলিং গতি

স্ক্রোলিংয়ের ডিফল্ট গতি স্ক্রিপ্টে 600 হিসাবে সেট করা আছে যা আপনি বাড়াতে বা হ্রাস করতে পারেন।

বৈশিষ্ট্য কোড কোথায় দেখতে হবে
স্ক্রোলিং গতি var সময়কাল = 600; লিপি

স্ক্রোলিং আইকন ডিসপ্লে পজিশন

স্ক্রোল বারটি উপরে থেকে 200px অবস্থানে থাকলে তীর চিহ্নটি প্রদর্শিত হবে যা নীচের কোড সহ স্ক্রিপ্টে সংজ্ঞায়িত করা হয়েছে:

বৈশিষ্ট্য কোড কোথায় দেখতে হবে
স্ক্রোলিং আইকন স্টার্ট পজিশন অফসেট ছিল = 200; লিপি

আপনি প্রয়োজনে শুরুর অবস্থান পরিবর্তন করতে পারেন।

আইকনের অবস্থান

ডিফল্টরূপে, আপ তীর আইকন 60px আপ এবং সিএসএস স্টাইলে সংজ্ঞায়িত নিম্ন ডান কোণ থেকে 55px দূরে প্রদর্শিত হবে। আপনি আপনার সাইটের জন্য উপযুক্ত অবস্থান চেক করতে ট্রায়াল এবং ত্রুটি পদ্ধতিতে এটি পরিবর্তন করতে পারেন।

বৈশিষ্ট্য কোড কোথায় দেখতে হবে
নীচের ডান কোণে স্ক্রোলিং আইকন অবস্থান প্রস্থ: 55px; উচ্চতা: 60px; স্টাইল

আইকন স্টাইল

আমরা ফন্ট অসাধারণ আইকন "fa-arrow-circle-up" ব্যবহার করেছি যা আপনি এটি HTML কোডে পরিবর্তন করতে পারেন।

বৈশিষ্ট্য কোড কোথায় দেখতে হবে
শীর্ষ আইকন শৈলীতে ফিরে যান <i class = “fa fa-arrow-circle-up”> </i> এইচটিএমএল

আপনার সাইটের জন্য বিকল্প আইকন ব্যবহার করতে ফন্ট অসাধারণ আইকন তালিকার দিকনির্দেশক আইকন বিভাগটি পড়ুন ।

আইকন সাইজ

ডিফল্ট 50px সিএসএস স্টাইলে আইকনের ফন্ট সাইজ হিসেবে ব্যবহৃত হয় যা আপনি আপনার প্রয়োজন অনুযায়ী পরিবর্তন করতে পারেন।

বৈশিষ্ট্য কোড কোথায় দেখতে হবে
শীর্ষ আইকন আকারে ফিরে যান ফন্ট সাইজ: 50px; স্টাইল

আইকন রঙ

এটি কাস্টমাইজেশনের সবচেয়ে গুরুত্বপূর্ণ অংশ যেখানে ফন্ট আইকনের রঙ সহজেই আপনার সাইটের লেআউট অনুসারে পরিবর্তন করা যায়। কোডটি দেখুন "রঙ: #808080;" সিএসএস কোডে এবং আপনার প্রয়োজন অনুসারে এটি যে কোনও রঙে পরিবর্তন করুন।

বৈশিষ্ট্য কোড কোথায় দেখতে হবে
শীর্ষ আইকন রঙে ফিরে যান রঙ: #808080; স্টাইল

রেকর্ডিং উত্স: www.webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত