كيفية إنشاء زر الصعود لأعلى الصفحة باستخدام HTML و CSS فقط

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء زر الصعود لأعلى الصفحة باستخدام HTML و CSS فقط.
 
في الوقت الحاضر ، تحتوي كل مدونة وموقع ويب على زر منفصل للعودة إلى أعلى صفحة الويب. عندما نقرأ أو نشاهد المحتوى على موقع الويب ، نبدأ في التمرير لأسفل لرؤية المزيد من المحتوى ، ولكن في كثير من الأحيان نريد العودة إلى الجانب العلوي. للعودة إلى أعلى صفحة الويب ، يتعين علينا التمرير لأعلى ، ولكن معظم مواقع الويب تستخدم زرًا للعودة إلى الأعلى بنقرة واحدة.
 
قد ترى في العديد من مواقع الويب ، هناك ميزة Scroll Top أو Back To Top Button التي تم إنشاؤها باستخدام HTML CSS & Javascript. هذه ميزة جيدة جدًا وتوفر بعض الثواني للزائرين أو المستخدمين.
 
إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج (انتقل إلى الأعلى أو زر الرجوع إلى الأعلى).

أتمنى أن تكون قد فهمت الرموز والمفاهيم الأساسية وراء إنشاء ميزات زر Back To Top أو Scroll To Top Button. كما رأيت في الفيديو ، هذا برنامج CSS خالص ، مما يعني استخدام HTML و CSS فقط لإنشاء هذا البرنامج.

إذا كنت تحب هذا البرنامج (Scroll To Top أو Back To Top Button) وتريد الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الأكواد المصدرية لهذا البرنامج. للحصول على أكواد المصدر ، تحتاج فقط إلى التمرير لأسفل.

قم بالتمرير إلى الزر العلوي أو زر الرجوع إلى الأعلى
كما هو الحال دائمًا ، قبل مشاركة أكواد هذا البرنامج (Scroll To Top أو Back To Top Button). دعنا نتحدث قليلاً عن العلامات والرموز الرئيسية لهذا البرنامج. كما رأيت في الفيديو ، قمت أولاً بإنشاء علامة <nav> لشريط التنقل لصفحة الويب. ثم داخل العلامة <nav> ، قمت بإنشاء علامة <div> مع اسم الفئة "logo" للشعار. بعد ذلك ، أنشأت علامة <div> أخرى باسم الفئة "content" ووضعت جميع العلامات الأخرى بداخلها.

وبالمثل ، داخل علامة <div> name "content" ، قمت بإنشاء بعض علامات <h1> و <h2> و <p> و <ul> و <li> لإدراج نص وهمي أو إظهاره. في ملف CSS ، أعطيت أولاً المستند إلى الهامش: 0 ؛ والحشو: 0 ؛ باستخدام * (المحدد العام) الذي يتخذه المتصفح افتراضيًا. ثم قمت ببعض الأسلوب في شريط التنقل والنصوص وما إلى ذلك.

في ملف HTML ، قمت مرة أخرى بإنشاء علامة <div> باسم الفئة "arrow-btn" ووضعت علامة <a> وعلامة <span> بداخلها. داخل علامة <span> ، استخدمت اسم فئة رائع الخط لعرض رمز السهم. في ملف CSS ، قمت ببعض نمط هذا الرمز لإنشاء زر التمرير العلوي. أخيرًا ، أخذت مُحدِّد HTML ، وداخله ، أضع سلوك التمرير: سلس ؛ قيمة لإظهار التأثير السلس عند النقر فوق الزر.

لإنشاء هذا البرنامج (Scroll To Top أو Back To Top Button). أولاً ، تحتاج إلى تحميل ملف الاكواد من زر التحميل