هل تريد تحسين تجربة التصفح في مدونتك؟
زر الرجوع للأعلى ضروري لأي مدونة احترافية! يساعد الزوار على العودة لبداية الصفحة بنقرة واحدة، خاصة في المقالات الطويلة. هذه الإضافة تقدم زراً عصرياً بتصميم أنيق وتأثيرات حركية سلسة.
✨ مميزات زر الرجوع للأعلى
يظهر تلقائياً
يظهر الزر فقط عند التمرير للأسفل ويختفي عند الوصول للأعلى.
تأثيرات سلسة
انتقال سلس ومريح للعين بدون حركة مفاجئة.
تصميم عصري
شكل دائري أنيق مع أيقونة سهم واضحة.
سريع وخفيف
كود JavaScript نقي بدون مكتبات ثقيلة.
متجاوب كامل
يعمل بكفاءة على جميع الأجهزة والشاشات.
سهل التخصيص
غيّر الألوان، الأحجام، والموضع بسهولة.
👀 معاينة الزر
مرر للأسفل قليلاً لترى الزر يظهر ⬇️
الزر سيظهر في الزاوية السفلية اليسرى من الشاشة
💻 كود HTML
أضف هذا الكود قبل وسم </body> في قالبك:
<!-- Back to Top Button -->
<button id="backToTop" class="back-to-top-btn" title="العودة للأعلى">
<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
<path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
</svg>
</button>
<!-- End Back to Top Button -->🎨 كود CSS
أضف هذا الكود قبل وسم </head>:
<style>
/* Back to Top Button Styles */
.back-to-top-btn {
position: fixed;
bottom: 30px;
left: 30px;
width: 55px;
height: 55px;
background: linear-gradient(135deg, #fa709a, #fee140);
border: none;
border-radius: 50%;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 8px 25px rgba(250, 112, 154, 0.4);
transition: all 0.3s ease;
z-index: 9999;
opacity: 0;
transform: scale(0);
color: white;
}
.back-to-top-btn.show {
display: flex;
opacity: 1;
transform: scale(1);
animation: slideIn 0.4s ease;
}
@keyframes slideIn {
from {
opacity: 0;
transform: scale(0) rotate(180deg);
}
to {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
.back-to-top-btn:hover {
transform: scale(1.1) translateY(-5px);
box-shadow: 0 12px 35px rgba(250, 112, 154, 0.5);
background: linear-gradient(135deg, #fee140, #fa709a);
}
.back-to-top-btn:active {
transform: scale(0.95);
}
.back-to-top-btn svg {
transition: transform 0.3s ease;
}
.back-to-top-btn:hover svg {
transform: translateY(-3px);
}
/* Responsive */
@media (max-width: 768px) {
.back-to-top-btn {
width: 50px;
height: 50px;
bottom: 20px;
left: 20px;
}
.back-to-top-btn svg {
width: 20px;
height: 20px;
}
}
/* للمدونات باللغة الإنجليزية - غير الموضع لليمين */
/*
.back-to-top-btn {
left: auto;
right: 30px;
}
*/
</style>⚙️ كود JavaScript
أضف هذا الكود أيضاً قبل وسم </body>:
<script>
// Back to Top Button Script
document.addEventListener('DOMContentLoaded', function() {
const backToTopBtn = document.getElementById('backToTop');
if (!backToTopBtn) return;
// إظهار/إخفاء الزر عند التمرير
window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) {
backToTopBtn.classList.add('show');
} else {
backToTopBtn.classList.remove('show');
}
});
// العودة للأعلى عند النقر
backToTopBtn.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// تأثير إضافي: اهتزاز خفيف كل 5 ثواني
setInterval(function() {
if (backToTopBtn.classList.contains('show')) {
backToTopBtn.style.animation = 'none';
setTimeout(function() {
backToTopBtn.style.animation = 'bounce 0.5s ease';
}, 10);
}
}, 5000);
});
// تأثير الاهتزاز
const style = document.createElement('style');
style.textContent = `
@keyframes bounce {
0%, 100% { transform: scale(1) translateY(0); }
50% { transform: scale(1.1) translateY(-8px); }
}
`;
document.head.appendChild(style);
</script>📝 خطوات التركيب البسيطة
افتح قالب بلوجر
اذهب إلى: المظهر → تعديل HTML
أضف كود CSS
ابحث عن </head> والصق كود CSS قبله
أضف كود HTML و JavaScript
ابحث عن </body> والصق الكودين قبله
احفظ واستمتع!
احفظ القالب ومرر في مدونتك لترى الزر!
🎨 تخصيص الزر
1️⃣ تغيير الألوان:
في كود CSS، ابحث عن:
background: linear-gradient(135deg, #fa709a, #fee140);
استبدل بالألوان التي تفضلها! مثلاً:
background: linear-gradient(135deg, #667eea, #764ba2); /* بنفسجي */
2️⃣ تغيير الموضع (لليمين):
في كود CSS، غيّر:
left: 30px;
إلى:
left: auto;
right: 30px;
3️⃣ تغيير حجم الزر:
في كود CSS، غيّر:
width: 55px;
height: 55px;
إلى الحجم الذي تريده (مثلاً 60px أو 70px)
4️⃣ تغيير متى يظهر الزر:
في كود JavaScript، ابحث عن:
if (window.pageYOffset > 300) {
الرقم 300 هو عدد البكسلات. غيّره لأي رقم تريد (500، 700، إلخ)
5️⃣ إلغاء تأثير الاهتزاز:
احذف هذا الجزء من كود JavaScript:
// تأثير إضافي: اهتزاز خفيف كل 5 ثواني
setInterval(function() {
...
}, 5000);
🎨 نماذج ألوان جاهزة
بنفسجي كلاسيكي
#667eea, #764ba2
وردي ناري
#f093fb, #f5576c
أزرق سماوي
#4facfe, #00f2fe
أخضر منعش
#43e97b, #38f9d7
❓ أسئلة شائعة
هل يؤثر على سرعة المدونة؟
لا إطلاقاً! الكود خفيف جداً ولا يستخدم أي مكتبات خارجية.
هل يعمل مع جميع المتصفحات؟
نعم، يعمل على جميع المتصفحات الحديثة (Chrome, Firefox, Safari, Edge).
هل يمكن تغيير شكل الأيقونة؟
نعم، استبدل كود SVG بأي أيقونة أخرى أو استخدم نص بسيط مثل "↑".
لماذا لا يظهر الزر؟
تأكد من إضافة جميع الأكواد الثلاثة (HTML, CSS, JavaScript) والتمرير للأسفل قليلاً.
💡 نصائح لأفضل استخدام:
- اختر ألواناً متناسقة مع تصميم مدونتك
- لا تجعل الزر كبيراً جداً حتى لا يزعج الزوار
- ضعه في مكان لا يغطي محتوى مهم
- اختبره على الموبايل للتأكد من وضوحه
- يمكنك إضافة تأثيرات صوتية عند النقر (اختياري)
ممتاز! الآن مدونتك أكثر احترافية
زوارك سيقدرون هذه اللمسة الاحترافية! 💙
