كود Scroll To Top ب React JS
كود Scroll To Top ب React JS
اتبع الخطوات التالية :-
1- قم بانشاء ملف للايقونة ( Icon.js )
2- قم بعمل استدعاء للملف الخاص بك في ملف المشروع الاساسي
;"import Icon from "./Icon.js
3- في ملف ال icon قم بوضع الاكواد التالية :-
import React, { useEffect, useState } from "react";
import { FaAngleUp } from "react-icons/fa";
const Icon = () => {
const [backToTop, setBackToTop] = useState(false);
useEffect(() => {
window.addEventListener("scroll", () => {
setCog(false);
if (window.scrollY > 100) {
setBackToTop(true);
} else {
setBackToTop(false);
}
});
}, []);
const scrollUp = () => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
};
return (
<>
<div
className="icon"
onClick={() => {
scrollUp();
}}
>
<FaAngleUp />
</div>
</>
);
};
export default Icon;
4- في النهاية ارجو ان تكون المساهمة قد اعجبتكم.
نبذة عن الكاتب
المساهمات
2
الردود
0
النقاط
0
| انشاء الحساب | منذ سنة |
| آخر تواجد | منذ 6 أشهر |
