دکمه بازگشت به بالای صفحه با استفاده از JavaScript و jQuery

خانه » طراحی وب » دکمه بازگشت به بالای صفحه با استفاده از JavaScript و jQuery

در بسیاری از سایت ها از دکمه “بازگشت به بالای صفحه” استفاده می شود تا کاربر وقتی به آخر صفحه برمی گردد به راحتی به بالای صفحه برگردد. این ویژگی کوچک UX در وب سایت های مدرن بسیار رایج است. به ویژه برای صفحات وب که دارای محتوای زیاد و طولانی هستند .

در این مقاله ، نحوه ایجاد یک دکمه پیمایش به بالا با استفاده از JavaScript و jQuery را با هم مرور خواهیم کرد.

دسترسی سریع : نمایش

نحوه ایجاد یک دکمه پیمایش به بالا با استفاده از JavaScript

با استفاده از قطعه کد زیر می توانید یک دکمه پیمایش به بالا به وب سایت خود اضافه کنید:

کد HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Scroll-to-Top button using JavaScript</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
<!-- BUTTON NEEDS FONT AWESOME FOR CHEVRON UP ICON, YOU CAN USE LATEST VERSION FOR MORE ICONS -->
<!-- fontawesome/ -->
<link href="https://dl.learnparsi.com/Data/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body id="top">
<h1>
Scroll To Top
</h1>
<div class="long-text">
<p>برای دیدن دکمه به پایین بروید.</p>
<p>برای بازگشت به بالای صفحه روی دکمه کلیک کنید</p>
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.<br><br>
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.<br><br>
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.<br><br>
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.<br><br>
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.<br><br>
</div>
<div id="scrolltop">
<a class="top-button" href="#top"><i class="icon-chevron-up"></i></a>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

در اینجا ، یک ساختار اساسی از صفحه وب با داده های ساختگی ایجاد شده است. فقط باید روی دکمه پیمایش به بالا تمرکز کنید.

<div id="scrolltop">
<a class="top-button" href="#top"><i class="icon-chevron-up"></i></a>
</div>

دکمه پیمایش به بالا با استفاده از top# به بالای صفحه اشاره می کند . top# شناسه برچسب <body> است .

کد جاوا اسکریپت

// ===== Scroll to Top ====
const scrollTop = document.getElementById('scrolltop')
// When the page is loaded, hide the scroll-to-top button
window.onload = () => {
scrollTop.style.visibility = "hidden";
scrollTop.style.opacity = 0;
}
// If the page is scrolled more than 200px,
// display the scroll-to-top button
// Otherwise keep the button hidden
window.onscroll = () => {
if (window.scrollY > 200) {
scrollTop.style.visibility = "visible";
scrollTop.style.opacity = 1;
} else {
scrollTop.style.visibility = "hidden";
scrollTop.style.opacity = 0;
}
};

دکمه پیمایش به بالا با توجه به شرایط زیر نمایش داده و پنهان می شود:

هنگام بارگیری صفحه ، دکمه پیمایش به بالا پنهان می شود.
دکمه پیمایش به بالا تا زمانی که صفحه ۲۰۰ پیکسل پیمایش نشود ، مخفی نگه داشته می شود. طبق نیاز خود می توانید پیکسل ها را تغییر دهید.

کد CSS

html {
scroll-behavior: smooth;
}
#scrolltop {
display: block;
visibility: visible;
opacity: 1;
transition: visibility 0s, opacity 0.5s ease-in;
position: fixed;
bottom: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.4);
border-radius: 20%;
}
.top-button {
text-decoration: none;
cursor: pointer;
padding: 30px;
color: #222;
}
body {
background: linear-gradient(180deg, #0697f9 0%, #f898bf 100%);
color: #fff;
font-family: 'Quicksand', sans-serif;
font-size: 24px;
line-height: 1.4;
text-align: center;
padding: 40px;
}
.long-text {
max-width: 700px;
margin: 0 auto;
padding: 40px;
background: rgba(0, 0, 0, 0.2);
}

CSS فوق برای سبک کردن دکمه پیمایش به بالا و صفحه وب استفاده می شود. شما می توانید با CSS بازی کنید و دکمه را مطابق با نیاز خود سبک دهید.

نحوه ایجاد یک دکمه پیمایش به بالا با استفاده از jQuery

با استفاده از قطعه کد زیر می توانید یک دکمه پیمایش به بالا به وب سایت خود اضافه کنید :

کد HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Back to top button using jQuery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,900,900i" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<!-- Back to top button -->
<a id="button"></a>
<!-- Some content to fill up the page -->
<div class="content">
<h1>Back to Top Button</h1>
<h3>Scroll down the page</h3>
<p>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.
</p>
<p>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.
</p>
<p>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.
</p>
<p>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.
</p>
<p>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.
</p>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

با کلیک بر روی این دکمه ، صفحه به سمت بالا پیمایش می شود. این بعد از افزودن کد 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');
});

در صورتی که کاربر بیش از ۳۰۰ پیکسل را در صفحه وب پیمایش کند ، کلاس show به عنصر دکمه اضافه می شود. این کلاس نمایش ، عنصر دکمه را قابل مشاهده می کند. به طور پیش فرض ، دید عنصر دکمه مخفی نگه داشته می شود. جزئیات بیشتر در مورد دکمه در کد CSS زیر است.

کد CSS

#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 فوق برای سبک کردن دکمه پیمایش به بالا و صفحه وب استفاده می شود. شما می توانید با کد CSS بازی کنید و دکمه را مطابق با نیاز خود سبک دهید.

اکنون شما یک دکمه کاملاً کاربردی پیمایش به بالا / بازگشت به بالا را دارید. اگر می خواهید به منبع اصلی کاملی که در این مقاله استفاده شده نگاهی بیندازید ، این کد در مخزن GitHub موجود است.

توجه : کد استفاده شده در این مقاله دارای مجوز MIT است .

همچنین بخوانید : ساخت ماشین حساب ساده با استفاده از HTML ، CSS و JavaScript

تجربه کاربر بر این مسئله است که آیا یک محصول نیازهای کاربرانش را برآورده می کند یا خیر. اگر شما یک طراح یا توسعه دهنده هستید ، خوب است که اصول طراحی UX را دنبال کنید و محصولات عالی ایجاد کنید. دکمه بازگشت به بالای صفحه در هر سایت و برنامه ای طولانی یک عنصر مهم کاربردی می باشد.

دکمه بازگشت به بالای صفحه با استفاده از JavaScript و jQuery

نحوه ایجاد یک دکمه پیمایش به بالا با استفاده از JavaScript

کد HTML

کد جاوا اسکریپت

کد CSS

نحوه ایجاد یک دکمه پیمایش به بالا با استفاده از jQuery

کد HTML

کد جی کوئری

کد CSS

مطالب مرتبط

راهنمای پرکاربرد اصطلاحات طراحی سایت (مبتدی تا پیشرفته)

پشتیبان‌گیری در هاست وردپرس چگونه است؟

نقش اپراتور پشتیبانی هاستینگ در رضایتمندی مشتریان هاست و سرور

ده نکته مهم برای بالا بردن امنیت سایت های وردپرس

چگونه با مهارت‌های وردپرس، اکسل و فتوشاپ یک وبسایت بی‌نقص بسازیم

معرفی ۳۰ ابزار مهم در طراحی وب سایت که باید بشناسید

قالب‌ وودمارت چیست (بررسی ۰ تا ۱۰۰ ویژگی، مزیت و امکانات)

بهترین ترفندهای کانوا برای طراحی چیست؟

هاست برای سئو بهتر است یا سرور مجازی؟

دیدگاه ها

لغو پاسخ