كيفية إنشاء: دوران سلس

تعلم كيفية استخدام CSS لإنشاء تأثيرات دوران سلسة.

التمرير السلس

التمرير السلس

إضافة scroll-behavior: smooth يمكن تمكين تمرير الصفحة بالسلاسة الكاملة:

ملاحظة:يمكن إضافة ذلك أيضًا إلى عنصر معين/مكعبر التمرير.

مثال

html {
  scroll-behavior: smooth;
}

تجربة شخصية

دعم المتصفحات

الرقم في الجدول يوضح إصدار المتصفح الأول الذي يدعم خاصية تمرير السحب بسلاسة.

حل متعدد المتصفحات

للمتصفحات التي لا تدعم scroll-behavior للمتصفحات التي لا تدعم jQueryلإنشاء حل متوافق مع جميع المتصفحات:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
  // أضف تمرير سلس لجميع الروابط
  $("a").on('click', function(event) {
    // تأكد من أن this.hash يحتوي على قيمة قبل تغيير السلوك الافتراضي
    if (this.hash !== "") {
      // تمنع السلوك الافتراضي للنقر على الرابط
      event.preventDefault();
      // احفظ قيمة الـ hash
      var hash = this.hash;
      // استخدم طريقة animate() من jQuery لإضافة تمرير 页面 سلس
      // رقم اختياري (800) يحدد الوقت بالألف ثانية الذي يستغرقه التمرير إلى منطقة معينة
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // بعد إكمال التمرير، أضف علامة الـ (#) إلى URL (سلوك النقر الافتراضي)
        window.location.hash = hash;
      );
    } // End if
  );
);
</script>

تجربة شخصية

الصفحات ذات الصلة

مرجع:خصائص scroll-behavior CSS