تصميم 5 أشكال لأزرار "العودة إلى الأعلى" باستخدام HTML و CSS
أزرار "العودة إلى الأعلى" هي واحدة من أهم الأدوات لتحسين تجربة المستخدم على المواقع الإلكترونية، حيث تساعد في العودة السريعة إلى أعلى الصفحة بنقرة زر واحدة. في هذا المقال ، اليوم نقدم لك 5 أشكال مختلفة لأزرار "العودة إلى الأعلى" بتصاميم جذابة باستخدام HTML و CSS.
ما هي فائدة زر "العودة إلى الأعلى"؟
زر "العودة إلى الأعلى" يسهل على المستخدمين التنقل في الصفحات الطويلة، حيث يمكنهم العودة إلى الجزء العلوي من الصفحة دون الحاجة إلى التمرير يدوياً. هذا الزر يمكن أن يحسن تجربة المستخدم ويزيد من تفاعلهم مع الموقع.
تصميم 1: زر دائري بسيط مع ظل خفيف
<button id="backToTop1" title="العودة إلى الأعلى">↑</button>
هذا الزر بسيط ودائري مع خلفية زرقاء وظل خفيف. يتميز بتصميمه العصري وتأثير الـ hover الذي يغير لون الزر إلى لون أغمق قليلاً. هذا التصميم يناسب المواقع البسيطة أو ذات الطابع التقني.
تصميم 2: زر دائري مع أيقونة مخصصة
<button id="backToTop2" title="العودة إلى الأعلى">⬆️</button>
يضيف هذا التصميم أيقونة مخصصة للزر، مما يجعله أكثر حيوية وتفاعلية. مع تأثير التكبير عند التمرير فوق الزر، يمكن استخدام هذا التصميم في المواقع الإبداعية أو مواقع التصاميم الجرافيكية.
تصميم 3: زر مستطيل مع زوايا دائرية
<button id="backToTop3" title="العودة إلى الأعلى">⬆ عودة لأعلى</button>
يأتي هذا الزر بتصميم مستطيل وزوايا دائرية مع نص بجانب الأيقونة.
كما انه يناسب المواقع التي تركز على المحتوى النصي أو المدونات، حيث يمكن للمستخدمين فهم وظيفة الزر بسرعة بفضل النص الواضح.
تصميم 4: زر مربع مع إطار وتأثير دوران
<button id="backToTop4" title="العودة إلى الأعلى">⬆</button>
في هذا التصميم، يتميز الزر بإطار ملون وتأثير دوران عند التمرير عليه. هذا الزر مثالي للمواقع التي تبحث عن لمسة فنية في تصميمها أو مواقع المشاريع الإبداعية.
تصميم 5: زر شفاف مع ظل داخلي
<button id="backToTop5" title="العودة إلى الأعلى">↑</button>
يضيف هذا الزر تأثير الظل الداخلي مع خلفية شفافة، مما يجعله جذابًا وأنيقًا. يناسب المواقع العصرية أو المواقع التي تتميز بتصاميم بسيطة وأنيقة.
كيفية دمج هذه الأزرار في موقعك؟
لدمج أي من هذه الأزرار في موقعك، يمكنك نسخ الأكواد الموضحة أعلاه وإضافتها إلى صفحات HTML الخاصة بك. تذكر أيضًا إضافة الـ JavaScript الذي يسمح بعرض الأزرار فقط عند التمرير إلى الأسفل، مما يضمن ظهور الأزرار في الوقت المناسب.
JavaScript المشترك لجميع الأزرار
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
var buttons = document.querySelectorAll('[id^="backToTop"]');
buttons.forEach(function(button) {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
button.style.display = "flex";
} else {
button.style.display = "none";
}
});
}
document.querySelectorAll('[id^="backToTop"]').forEach(function(button) {
button.onclick = function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
};
});
</script>
تحسين تجربة المستخدم بأزرار العودة إلى الأعلى
يُعد زر العودة إلى الأعلى أداة بسيطة لكنها قوية لتحسين تجربة المستخدم. لأنها تتيح لك و للمستخدمين العودة إلى أعلى الصفحة بسهولة دون الحاجة إلى التمرير الطويل.
هناك المزيد بالإضافة إلى ذلك، يمكن أن تساعد في تحسين SEO من خلال تعزيز تفاعل المستخدمين مع الموقع وزيادة مدة بقائهم على الصفحات.
الخاتمة
بإضافة أحد هذه الأزرار المميزة إلى موقعك، ستضمن تحسين تجربة المستخدم وجعل التنقل في الموقع أكثر سهولة وسلاسة. اختر التصميم الذي يناسب طابع موقعك واستمتع بموقع أكثر تفاعلية.
