كود انشاء زر الصعود في المدونة

شرح كود زر "العودة إلى الأعلى" (Back to Top Button)

أهمية الكود وفائدته

هذا الكود ينشئ زرًا ثابتًا في أسفل الصفحة يظهر عند التمرير لأسفل، ويسمح بالعودة لأعلى الصفحة بنقرة واحدة.

• تحسين تجربة المستخدم في الصفحات الطويلة
• زيادة تفاعل الزوار مع المحتوى
• إضافة لمسة احترافية للتصميم
• تقليل معدلات الارتداد

طريقة التركيب

1. أضف جزء HTML قبل إغلاق </body>
2. أضف جزء CSS في <style> أو ملف منفصل
3. أضف جزء JavaScript في <script> أو ملف منفصل

شرح تفصيلي للكود

HTML

<div class="top-link-hide">
  <a class="top-link-show" href="" id="js-top">
    <span class="screen-reader-text">
      <img class="zonezollogo" src="arrow-image.png" />
    </span>
  </a>
</div>

ينشئ زرًا يحتوي على سهم للعودة للأعلى.

CSS

.zonezollogo {
  height: 8.4px;
  width: 13px;
}

.top-link-show {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 35px;
  height: 35px;
  background-color: #3560ab;
}

يحدد تنسيقات ومظهر الزر.

JavaScript

const scrollToTopButton = document.getElementById('js-top');

window.addEventListener("scroll", () => {
  scrollToTopButton.className = window.scrollY > 0 ? "top-link-show" : "top-link-hide";
});

scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  window.scrollTo({top: 0, behavior: 'smooth'});
}

يتحكم في ظهور الزر والتمرير السلس.

نصائح للاستخدام

• اختر موقعًا مناسبًا للزر
• استخدم ألوانًا متناسقة مع التصميم
• اختبر على مختلف الأجهزة
• اضبط سرعة التمرير حسب التفضيل

الكود كاملا

<!-- محتوى الصفحة الطويل -->
    <div style="height: 2000px;"></div>
    
    <!-- زر العودة للأعلى -->
    <div class="top-link-container">
        <a href="#top" class="top-link-button" id="backToTopBtn" aria-label="العودة للأعلى">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M12 4l-8 8h5v8h6v-8h5z"/>
            </svg>
        </a>
    </div>
    

/* أنماط أساسية */
        .top-link-container {
            position: fixed;
            bottom: 25px;
            right: 25px;
            z-index: 9999;
            transition: all 0.4s ease;
        }
        
        .top-link-button {
            width: 50px;
            height: 50px;
            background-color: #3560ab;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(20px);
        }
        
        .top-link-button.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .top-link-button:hover {
            background-color: #2a4d8a;
            transform: scale(1.1);
        }
        
        .top-link-button svg {
            width: 24px;
            height: 24px;
            fill: white;
        }
        
        /* تأثيرات إضافية */
        .top-link-button.pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(53, 96, 171, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(53, 96, 171, 0); }
            100% { box-shadow: 0 0 0 0 rgba(53, 96, 171, 0); }
        }
    

document.addEventListener('DOMContentLoaded', function() {
            const backToTopBtn = document.getElementById('backToTopBtn');
            let isScrolling;
            
            // دالة التمرير السلس
            function smoothScrollToTop() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            }
            
            // دالة التحكم في ظهور الزر
            function toggleBackToTopButton() {
                if (window.scrollY > 300) {
                    backToTopBtn.classList.add('visible');
                    backToTopBtn.classList.add('pulse');
                } else {
                    backToTopBtn.classList.remove('visible');
                    backToTopBtn.classList.remove('pulse');
                }
            }
            
            // تحسين الأداء باستخدام throttle
            window.addEventListener('scroll', function() {
                window.clearTimeout(isScrolling);
                isScrolling = setTimeout(toggleBackToTopButton, 50);
            });
            
            // حدث النقر
            backToTopBtn.addEventListener('click', function(e) {
                e.preventDefault();
                smoothScrollToTop();
            });
            
            // التحقق الأولي
            toggleBackToTopButton();
            
            // تأثير إضافي عند الوصول للأعلى
            window.addEventListener('scroll', function() {
                if (window.scrollY === 0) {
                    backToTopBtn.classList.add('clicked');
                    setTimeout(() => {
                        backToTopBtn.classList.remove('clicked');
                    }, 1000);
                }
            });
        });
    

معاينة

كيف كان المقال؟