از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
روش اسکرول کردن به بالا، پایین یا هر بخش در React با یک جزء دکمه «پیمایش به بالا» ویژگی افزودنی عالی برای هر وب‌سایتی است که بازدیدکنندگان را مجبور می‌کند قبل از رسیدن به انتهای وب‌سایت، مسافت طولانی را پیمایش کنند page، از آنجایی که بازگشت به اوج بسیار آزاردهنده می شود. با گسترش، پیمایش به پایین یا هر نقطه یا بخش خاصی…
سرفصلهای مطلب
معرفی
این “پیمایش به بالا” ویژگی افزودنی عالی برای هر وب‌سایتی است که بازدیدکنندگان را مجبور می‌کند قبل از رسیدن به انتهای وب‌سایت، مسافت طولانی را پیمایش کنند page، از آنجایی که بازگشت به اوج بسیار آزاردهنده می شود.
با توسعه، پیمایش به پایین یا هر نقطه یا بخش خاصی به شما امکان می دهد کاربر را در یک تجربه یکپارچه برای پیمایش کنید. برنامه های تک صفحه ای (SPA).
در این دست -روی ما یاد خواهیم گرفت که چگونه یک دکمه React بسازیم که به کاربران اجازه می دهد تا با React به بالا، پایین یا هر قسمتی اسکرول کنند. استفاده خواهیم کرد واکنش قلاب و این را به یک جزء قابل استفاده مجدد تبدیل کنید. در پایان این مقاله، روش انجام این کار را با
react-scroll-to-topکتابخانه
توجه داشته باشید: کد منبع در ما موجود است مخزن GitHubو برای دیدن نسخه نمایشی زنده از برنامه، بازدید کنید این برنامه Vercel.
استفاده از React و React Hooks
برای عملکرد ساده ای مانند این، به جای نصب کتابخانه، می توانید به راحتی یک راه حل را از ابتدا کدنویسی کنید. ایجاد عملکردی مانند این از ابتدا امکان سفارشی سازی بیشتر و قدردانی از آنچه که کتابخانه ها انتزاع می کنند را فراهم می کند!
شروع شدن
ما یک مؤلفه جداگانه می سازیم و یک قطعه کد قابل استفاده مجدد تولید می کنیم که می تواند بین پروژه های شما پخش شود. ما علاوه بر این از نماد فلش استفاده خواهیم کرد react-icons با این حال، برای این راهنما، هر نمادی که برای شما کار می کند به همان اندازه کار خواهد کرد.
در حال نصب نمادهای واکنش
برای استفاده react-icons، باید ماژول را نصب کنید. می توانید نصب کنید react-icons با:
$ npm i react-icons
در React به بالا بروید
اجازه دهید import کتابخانه و خود آیکون، و آنها را به عنوان یک جزء تنظیم کنید:
import React from 'react';
import { FaAngleUp } from 'react-icons/fa';
import './index.css';
const ScrollToTop = () => {
return (
<div className="top-to-btm">
<FaAngleUp className="icon-position icon-style" />
</div>
);
};
export default ScrollToTop;
بیایید کمی سبک به نماد اعمال کنیم و یک انیمیشن حرکتی به آن اضافه کنیم index.css:
.top-to-btm{
position: relative;
}
.icon-position{
position: fixed;
bottom: 40px;
right: 25px;
z-index: 20;
}
.icon-style{
background-color: #551B54;
border: 2px solid #fff;
border-radius: 50%;
height: 50px;
width: 50px;
color: #fff;
cursor: pointer;
animation: movebtn 3s ease-in-out infinite;
transition: all .5s ease-in-out;
}
.icon-style:hover{
animation: none;
background: #fff;
color: #551B54;
border: 2px solid #551B54;
}
@keyframes movebtn {
0%{
transform: translateY(0px);
}
25%{
transform: translateY(20px);
}
50%{
transform: translateY(0px);
}
75%{
transform: translateY(-20px);
}
100%{
transform: translateY(0px);
}
}
عالی! اکنون می توانیم منطقی را پیاده سازی کنیم که کاربر را به بالای صفحه برمی گرداند page.
پیاده سازی منطق
ما از useState() و useEffect() قلاب هایی که به ما امکان می دهد تا عملکرد را به راحتی و به سرعت توسعه دهیم.
import React, { useState, useEffect } from 'react';
مرحله بعدی ایجاد یک است state و آن را تنظیم کنید false به صورت پیش فرض؛ این حالت دید را کنترل می کند دکمه “پیمایش به بالا”.، از آنجایی که ما فقط می خواهیم این دکمه بعد از اینکه کاربر کمی به پایین اسکرول کرد ظاهر شود و بعد از اینکه کاربر تا آخر اسکرول کرد ناپدید شود:
const (showTopBtn, setShowTopBtn) = useState(false);
در این مرحله، ما از آن استفاده خواهیم کرد useEffect() hook برای ساختن منطقی که تعیین می کند چه زمانی می خواهیم دکمه ظاهر شود و چه زمانی می خواهیم ناپدید شود.
توجه داشته باشید: این افکت هوک به طور پیش فرض پس از رندر اولیه و هر بار که وضعیت به روز می شود فعال است. همانطور که از نام آن پیداست، هر زمان که حالت تغییر کند، برای اجرای یک افکت استفاده می شود.
بیایید حالت را تنظیم کنیم true پس از اینکه کاربر 400 پیکسل به پایین اسکرول کرد:
useEffect(() => {
window.addEventListener('scroll', () => {
if (window.scrollY > 400) {
setShowTopBtn(true);
} else {
setShowTopBtn(false);
}
});
}, ());
یک را اضافه کردیم EventListener به window برای گوش دادن به یک اسکرول و سپس اجرای یک تابع زمانی که شرطی در شنونده برمی گردد true. اگر موقعیت اسکرول عمودی بیشتر از 400 (همانطور که توسط شما تعیین شده است)، تابع مقدار را تنظیم می کند showTopBtn دولت به true; در غیر این صورت، آن را تنظیم می کند false. به یاد داشته باشید که هنگامی که در صفحه وب پیمایش می کنید، این به طور مداوم اجرا می شود، و بنابراین دکمه را به روز می کند تا زمانی که شخصی دوباره به بالای صفحه پیمایش می کند، نمایش داده نمی شود. page.
آخرین عملکردی که می خواهیم پیاده سازی کنیم، مدیریت است click رویداد! زمانی که کاربر کلیک کرد روی دکمه، ما می خواهیم آنها را به بالای صفحه برگردانیم. خوشبختانه – window شی دارای یک اختصاصی است scrollTo() روش دقیقا برای این! بیایید آن را با عملکردی بپیچانیم که وقتی کاربر روی دکمه کلیک می‌کند، آن را فراخوانی می‌کنیم:
const goToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
};
توجه داشته باشید: window.scrollTo() الف را نیز می پذیرد behavior پارامتری که برای تعیین اینکه آیا اسکرول باید به آرامی متحرک شود یا خیر (smooth، یا فوراً در یک پرش اتفاق می افتد (auto، مقدار پیش فرض).
در نهایت، بیایید یک را اضافه کنیم onclick() شنونده دکمه در نشانه گذاری ما، وصل کردن آن به دکمه goToTop() روش:
import React, { useState, useEffect } from "react";
import { FaAngleUp } from "react-icons/fa";
import "./index.css";
const ScrollToTop = () => {
const (showTopBtn, setShowTopBtn) = useState(false);
useEffect(() => {
window.addEventListener("scroll", () => {
if (window.scrollY > 400) {
setShowTopBtn(true);
} else {
setShowTopBtn(false);
}
});
}, ());
const goToTop = () => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
};
return (
<div className="top-to-btm">
{" "}
{showTopBtn && (
<FaAngleUp
className="icon-position icon-style"
onClick={goToTop}
/>
)}{" "}
</div>
);
};
export default ScrollToTop;
خودشه! اکنون می توان این مؤلفه را به یک جدید وارد کرد page و استفاده کرد. در App.js فایل، اجازه دهید import آی تی:
import ScrollToTop from './ScrollToTop';
function App() {
return (
<div className="App">
<ScrollToTop />
<div className="section section1"></div>
<div className="section section2"></div>
<div className="section section3"></div>
<div className="section section4"></div>
<div className="section section5"></div>
</div>
);
}
export default App;
توجه داشته باشید: برای استایل دادن به این pageرجوع به ما شود مخزن GitHub..
با استفاده از react-scroll-to-top کتابخانه
این react-scroll-to-top کتابخانه یک جزء دکمه ای سبک وزن و قابل تنظیم است که به بالای صفحه اسکرول می شود page هنگام کلیک کردن این کامپوننت مشابه مولفه ما است، اما لازم نیست خودتان آن را کدنویسی کنید.
به طور طبیعی، فقط زمانی ظاهر می شود که به اندازه کافی به پایین پیمایش کرده باشید که نشان دادن آن منطقی باشد.
در حال نصب react-scroll-to-top
این دستور را در خود اجرا کنید terminal:
$ npm i react-scroll-to-top
به بالا بروید با react-scroll-to-top
برای استفاده از کامپوننت، ما import react-scroll-to-top و همانطور که از خودمان استفاده کرده ایم از آن استفاده کنیم:
وارد کنید و سپس درج کنید <ScrollToTop /> در هر نقطه از تابع render/return شما:
import ScrollToTop from "react-scroll-to-top";
function App() {
return (
<div className="App">
<ScrollToTop />
<div className="section section1"></div>
<div className="section section2"></div>
<div className="section section3"></div>
<div className="section section4"></div>
<div className="section section5"></div>
</div>
);
}
export default App;
کتابخانه نیز قابل تنظیم است! کمی از لوازم جانبی وجود دارد که می توانید برای جلوه های مختلف آن را تغییر دهید.
این ویژگی‌های بسیار زیادی دارد و همه آنها در زیر با توضیحات و نوع داده‌هایی که دریافت می‌کنند فهرست شده‌اند:
| پشتیبانی | تایپ کنید | شرح | پیش فرض |
|---|---|---|---|
| صاف | بولی | آیا از پیمایش صاف استفاده شود * | نادرست |
| بالا | عدد | ارتفاع بعد page اسکرول کنید تا قابل مشاهده باشد | 20 |
| رنگ | رشته | رنگ پر کردن نماد SVG | “سیاه” |
| svgPath | رشته | ویژگی مسیر d نماد SVG | یک مسیر پیکان |
| عرض | رشته | عرض نماد SVG | “28” |
| ارتفاع | رشته | ارتفاع نماد SVG | “28” |
| جعبه نمایش | رشته | ویژگی ViewBox نماد SVG | “0 0 256 256” |
| جزء | هر | مؤلفه ای برای لغو نماد SVG. نمونه ها را ببینید | |
| سبک | هدف – شی | شیء برای افزودن/نادیده گرفتن استایل | |
| نام کلاس | رشته | نام کلاس برای نادیده گرفتن کامل استایل |
به پایین بروید
این اسکرول به پایین ویژگی در React به طور مشابه کار می کند اسکرول به بالا – ما یک تابع تعریف می کنیم، که روی با فشار دادن دکمه، کاربر را به یک نقطه تنظیم می برد. این بار، نقطه بالا نخواهد بود – پایین خواهد بود:
const scrollToBottom = () => {
window.scrollTo({
top: document.documentElement.scrollHeight,
behavior: 'smooth',
});
};
را تنظیم کردیم top ملک به ارتفاع کل page، همانطور که از document. این تضمین می کند که ما به ارتفاع پیکسل زیر کل پیمایش می کنیم page – یا بهتر است بگوییم، به پایین page.
گام بعدی شامل کردن onclick() روش در نشانه گذاری ما برای دکمه:
<div className="link btn" onClick={scrollToBottom}>
Scroll to bottom <MdArrowDropDownCircle />
</div>
با React به بخش خاصی بروید
پیمایش به یک بخش خاص واقعاً با تکpage وب‌سایت‌ها، زیرا به جای اینکه کاربر را به مسیر دیگری هدایت کنید page برای صفحات رایج مانند “درباره ما” و “تماس” – فقط می توانید آنها را به بخش مربوطه پیمایش کنید روی که page. این یک رویکرد محبوب هنگام گفتن داستان با صفحات است، جایی که کاربر انتظار می رود به هر حال به پایین اسکرول کند، اما می تواند به بخش خاصی نیز بپرد.
باز هم – این اساساً همان کاری است که ما انجام داده ایم. با این حال، این بار، ما به یک عنصر داده شده پیمایش خواهیم کرد.
پیاده سازی منطق
ما استفاده خواهیم کرد useRef() hook – توکار است واکنش نشان دهید hook که یک آرگومان را به عنوان مقدار اولیه خود می پذیرد و یک مرجع برمی گرداند. مرجع دارای خاصیت جالب و مفیدی به نام است جاری. این useRef() hook شبیه به جاوا اسکریپت Vanilla است getElementById().
اولین قدم این است که import useRef() و سپس یک را ایجاد کنید مرجع (ارجاع) به بخشی که می خواهیم به آن پیمایش کنیم:
import { useRef } from react;
const aboutSection = useRef(null);
مرحله بعدی اضافه کردن ref ما به بخشی که می خواهیم به آن پیمایش کنیم اعلام کردیم:
<div className="section section2" ref={aboutSection}>
<h2>About Us</h2>
</div>
اکنون، ما به مرجع فعلی پیمایش می کنیم و آن را به سمت بالا تنظیم می کنیم، به طوری که به جای قرار دادن بالای عنصر در بالای صفحه نمایش روی پایین آن:
const scrollDown = () => {
window.scrollTo({
top: aboutSection.current.offsetTop,
behavior: 'smooth',
});
};
در این مرحله، ما با موفقیت تمام منطق لازم را برای کمک به ما در پیمایش به یک منطقه مشخص شده پیاده سازی کرده ایم. homepage با استفاده از واکنش بعد، ما را اضافه می کنیم onclick() روش به دکمه در نشانه گذاری ما:
<li className="link" onClick={scrollDown}>
About Us
</li>
ایجاد کد ما قابل استفاده مجدد
نوارهای Nav به طور معمول دارای چندین پیوند هستند که به چندین بخش منتهی می شوند. اعمال مکرر نیاز به تعمیم بین مصادیق دارد! ما می توانیم منطق را قابل استفاده مجدد از این طریق کنیم:
const scrollDown = (ref) => {
window.scrollTo({
top: ref.current.offsetTop,
behavior: 'smooth',
});
};
در کد بالا، ما در حال عبور از refمقدار ‘ از عملکردی که در دکمه فرد فعال می شود.
نوار ناوبری روی شما page می تواند چیزی در امتداد خطوط زیر به نظر برسد:
<div className="section section1">
<div className="link btn">
Scroll to bottom <MdArrowDropDownCircle />
</div>
<ul className="nav-links">
<li className="link" onClick={() => scrollDown(aboutSection)}>
About Us
</li>
<li className="link" onClick={() => scrollDown(servcesSection)}>
Services
</li>
<li className="link" onClick={() => scrollDown(contactSection)}>
Contact
</li>
</ul>
</div>
<div className="section section2" ref={aboutSection}>
<h2>About Us</h2>
</div>
<div className="section section3" ref={servcesSection}>
<h2>Services</h2>
</div>
<div className="section section4" ref={contactSection}>
<h2>Contact</h2>
</div>
نتیجه
در این راهنما، ما یاد گرفتیم که چگونه یک جزء قابل استفاده مجدد را از ابتدا ایجاد کنیم تا عملیات اسکرول به بالا را به راحتی انجام دهیم. این جزء به راحتی بین پروژه ها قابل انتقال است! فقط فایل های مرتبط را انتقال دهید و import آن را به یک جدید page. در نهایت – ما نگاهی به کتابخانه محبوبی انداخته‌ایم که از این کار برای ما مراقبت می‌کند، و همچنین لوازم مرتبط با سفارشی کردن آن.
نسخه ی نمایشی زنده برای برنامه را می توان یافت اینجا.
منتشر شده در 1403-01-11 19:54:03
