تحكم في التمرير والتنقل في الصفحة باستخدام JavaScript

في هذا الدرس، سنتعلم كيفية استخدام JavaScript لتنفيذ التمرير الناعم (smooth scroll) وإظهار/إخفاء زر الانتقال إلى الأعلى والأسفل بناءً على تمرير المستخدم.

 التمرير إلى الأسفل بنقرة زر

يتيح الكود التالي للمستخدم التمرير إلى الأسفل من خلال النقر على زر محدد.

```javascript
var _goBottom = document.querySelector('#goBottom');

_goBottom.addEventListener('click', function () {
var windowHeight = window.innerHeight;
window.scroll({
top: windowHeight,
left: 0,
behavior: 'smooth'
});
});
```

 إظهار زر العودة إلى الأعلى عند التمرير

يتم إظهار زر العودة إلى الأعلى تلقائيًا عندما يتم التمرير لأسفل الصفحة، وإخفاؤه عند العودة للأعلى.

```javascript
window.addEventListener("scroll", function () {
var _goTop = document.querySelector('#topBtn');

if (window.scrollY > window.innerHeight) {
_goTop.style.display = 'block';
} else {
_goTop.style.display = 'none';
}
});
```

 التمرير إلى الأعلى بنقرة زر

يتيح هذا الكود للمستخدم التمرير إلى الأعلى من خلال النقر على زر محدد.

```javascript
var _goTop = document.querySelector('#topBtn');
_goTop.addEventListener('click', function () {
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
});
```

 تعديل موضع زر الانتقال إلى الأسفل

في الأجهزة ذات العرض الضيق (أقل من 1024 بكسل)، يتم تعديل موضع زر الانتقال إلى الأسفل لتحسين الوصولية.

```javascript
if (window.outerWidth < 1024) {
document.querySelector('#goBottom').style.bottom = '20%';
}
```

 استخدام JavaScript للتحكم في التمرير والانتقال

يمكنك الآن دمج هذه الأكواد في مدونتك لتحسين تجربة التصفح وتوفير طرق مريحة للمستخدم للتمرير والانتقال داخل الصفحة.