تعلم البلوجر هكركوز الكويت: برمجه هكركوز الازرار للاعلى والاسفل

الجمعة

برمجه هكركوز الازرار للاعلى والاسفل

عدد المشاهدات الان

نُضيف أزرار التمرير داخل index.html

<button onclick="scrollToTop()" class="scroll-btn top">🔝</button>
<button onclick="scrollToBottom()" class="scroll-btn bottom">🔻</button>

نُضيف تنسيق CSS خاص بها في style.css

.scroll-btn {
position: fixed;
right: 20px;
background-color: #2c3e50;
color: white;
border: none;
padding: 12px;
border-radius: 50%;
cursor: pointer;
z-index: 100;
font-size: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
transition: background 0.3s;
}

.scroll-btn:hover {
background-color: #1abc9c;
}

.scroll-btn.top {
bottom: 80px;
}

.scroll-btn.bottom {
bottom: 20px;
}

نضيف دوال التمرير في script.js

function scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}

function scrollToBottom() {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
}

وسلامتكم

اذا حبيت نسخ المقالهـ