Home-theater-designers
একটি 'স্ক্রল-টু-টপ' বোতাম ব্যবহার করা হয় যাতে আপনার ভিউ সহজেই পৃষ্ঠার শীর্ষে ফিরে আসে। এই ছোট ইউএক্স বৈশিষ্ট্যটি আধুনিক ওয়েবসাইটগুলিতে খুব সাধারণ। এটি বিশেষভাবে ওয়েব পেজগুলির জন্য সহায়ক যেখানে প্রচুর সামগ্রী রয়েছে, যেমন একক পৃষ্ঠা অ্যাপ্লিকেশন।
অ্যান্ড্রয়েডে ডাউনলোডগুলি কোথায় পাবেন
এই নিবন্ধে, আপনি শিখবেন কিভাবে জাভাস্ক্রিপ্ট এবং jQuery ব্যবহার করে একটি স্ক্রল-টু-টপ বোতাম তৈরি করতে হয়।
কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করে একটি স্ক্রল-টু-টপ বাটন তৈরি করবেন
আপনি নিম্নলিখিত কোড স্নিপেট ব্যবহার করে আপনার ওয়েবসাইটে একটি স্ক্রল-টু-টপ বোতাম যুক্ত করতে পারেন:
HTML কোড
Scroll-to-Top button using JavaScript
Scroll down the page
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
এখানে, ওয়েব পেজের একটি মৌলিক কাঠামো তৈরি করা হয়েছে ডামি ডেটা দিয়ে। আপনাকে কেবল স্ক্রল-টু-টপ বোতামে ফোকাস করতে হবে।
যখন এই বোতামটি ক্লিক করা হয়, পৃষ্ঠাটি শীর্ষে স্ক্রোল করা হয়। JQuery কোড যোগ করার পর এটি কার্যকরী হবে।
jQuery কোড
সম্পর্কিত: JQuery এ কীভাবে একটি উপাদান তৈরি করবেন তা শিখুন
// ===== Scroll to Top ====
var btn = $('#button');
// If the page is scrolled more than 300px,
// show the scroll-to-top button
// Otherwise hide the button
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({scrollTop:0}, '300');
});এখানে দেখান ব্যবহারকারী ওয়েব পেজে 300 পিক্সেলের বেশি স্ক্রোল করলে বাটন এলিমেন্টে ক্লাস যোগ করা হয়। এই দেখান ক্লাস বোতাম উপাদান দৃশ্যমান করে তোলে। ডিফল্টরূপে, বোতাম উপাদানটির দৃশ্যমানতা গোপন রাখা হয়। বোতাম সম্পর্কে আরও বিস্তারিত নিচের CSS কোডে আছে।
CSS কোড
সম্পর্কিত: সহজ সিএসএস কোড উদাহরণ আপনি 10 মিনিটের মধ্যে শিখতে পারেন
#button {
display: inline-block;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s,
opacity .5s, visibility .5s;
opacity: 0;
visibility: hidden;
z-index: 1000;
}
#button::after {
content: 'f077';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
#button:hover {
cursor: pointer;
background-color: #333;
}
#button:active {
background-color: #555;
}
#button.show {
opacity: 1;
visibility: visible;
}
/* Styles for the content section */
.content {
width: 77%;
margin: 50px auto;
font-family: 'Merriweather', serif;
font-size: 17px;
color: #6c767a;
line-height: 1.9;
}
@media (min-width: 500px) {
.content {
width: 43%;
}
#button {
margin: 30px;
}
}
.content h1 {
margin-bottom: -10px;
color: #03a9f4;
line-height: 1.5;
}
.content h3 {
font-style: italic;
color: #96a2a7;
}উপরের সিএসএস স্ক্রল-টু-টপ বোতাম এবং ওয়েব পেজ স্টাইল করতে ব্যবহৃত হয়। আপনি CSS কোড দিয়ে খেলতে পারেন এবং আপনার প্রয়োজনীয়তা অনুসারে বোতামটি স্টাইল করতে পারেন।
এখন আপনার একটি সম্পূর্ণ কার্যকরী স্ক্রল-টু-টপ / ব্যাক-টু-টপ বাটন আছে। আপনি যদি এই নিবন্ধে ব্যবহৃত সম্পূর্ণ সোর্স কোডটি দেখতে চান তবে এখানে গিটহাব সংগ্রহস্থল একই.
বিঃদ্রঃ : এই নিবন্ধে ব্যবহৃত কোড হল এমআইটি লাইসেন্সপ্রাপ্ত ।
ব্যবহারকারীর অভিজ্ঞতা সম্পর্কে আরও জানুন
একটি পণ্য তার ব্যবহারকারীদের চাহিদা পূরণ করে কিনা তা ব্যবহারকারীর অভিজ্ঞতাকে কেন্দ্র করে। আপনি যদি একজন ডিজাইনার বা ডেভেলপার হন, তাহলে আপনি UX ডিজাইনের নীতিগুলি অনুসরণ করে এবং অসাধারণ পণ্য তৈরি করতে ভাল করবেন। যদি এই ক্ষেত্রের আগ্রহ আপনার হয়, তাহলে আপনাকে শুরু করার জন্য সঠিক পথ অনুসরণ করতে হবে।
আইপড থেকে আইটিউনসে গানগুলি কীভাবে সরানো যায়শেয়ার করুন শেয়ার করুন টুইট ইমেইল ইউএক্স ডিজাইনার হতে চান? এখানে কিভাবে শুরু করা যায়
সফ্টওয়্যার ব্যবহারকারীর প্রয়োজনের যত্ন নেওয়া হয়েছে এবং তারা এই প্রক্রিয়ায় আনন্দিত তা নিশ্চিত করা ইউএক্স ডিজাইনারের কাজ।
পরবর্তী পড়ুন সম্পর্কিত বিষয়- প্রোগ্রামিং
- জাভাস্ক্রিপ্ট
- jQuery
যুবরাজ ভারতের দিল্লি বিশ্ববিদ্যালয়ের কম্পিউটার সায়েন্সের স্নাতক ছাত্র। তিনি ফুল স্ট্যাক ওয়েব ডেভেলপমেন্ট সম্পর্কে উত্সাহী। যখন তিনি লিখছেন না, তিনি বিভিন্ন প্রযুক্তির গভীরতা অন্বেষণ করছেন।
যুবরাজ চন্দ্রের কাছ থেকে আরোআমাদের নিউজলেটার সদস্যতা
প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!
সাবস্ক্রাইব করতে এখানে ক্লিক করুন