التمرير السلس عند النقر فوق رابط ربط

عند التنقل في صفحة ويب باستخدام روابط الربط، يتوقع المستخدمون انتقالًا سلسًا إلى القسم المستهدف. ومع ذلك، يمكن أن يكون سلوك التمرير الافتراضي مفاجئًا. تستكشف هذه المقالة تقنيات لتحقيق التمرير السلس عند النقر على الروابط الأساسية.

الدعم الأصلي

قدمت المتصفحات مثل Chrome وFirefox دعمًا أصليًا للتمرير السلس. يتم تنفيذ ذلك باستخدام خاصية "السلوك" مع القيمة "سلس" عند التمرير إلى العرض:

document.querySelectorAll('a[href^="#"]').forEach(anchor => { مرساة.addEventListener('انقر'، وظيفة (ه) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ السلوك: "سلس" }); }); });

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

jQuery Plugin

بالنسبة للمتصفحات الأقدم، يمكن للمكون الإضافي jQuery تسهيل الرسوم المتحركة التمريرية. تستخدم هذه التقنية طريقة "التحريك" لنقل الصفحة إلى القسم المستهدف:

$(document).on('click', 'a[href^="#"]', function (event) { Event.preventDefault(); $('html، الجسم').animate({ التمرير العلوي: $($.attr(this, 'href')).offset().top }، 500)؛ });

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

تقنية محسنة

إذا كان العنصر المستهدف يفتقر إلى معرف، فيمكن استخدام مكون jQuery الإضافي المعدل التالي:

$('a [href^="#"]').click(function () { $('html، الجسم').animate({ التمرير العلوي: $('[name="' $.attr(this, 'href').substr(1) '"]').offset().top }، 500)؛ عودة كاذبة. });

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

تحسين الأداء

التخزين المؤقت لمحدد "$('html, body')" داخل متغير يؤدي إلى تحسين الأداء:

var $ الجذر = $('html, body'); $('a[href^="#"]').click(function () { $جذر. تحريك({ التمرير العلوي: $( $.attr(this, 'href') ).offset().top }، 500)؛ عودة كاذبة. });

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

الحفاظ على تجزئة عنوان URL

لتحديث تجزئة عنوان URL عند التمرير السلس، استخدم رد الاتصال "الرسوم المتحركة":

var $root = $('html, الجسم'); $('a[href^="#"]').click(function() { var href = $.attr(this, 'href'); $جذر. تحريك({ التمرير العلوي: $(href).offset().top }، 500، وظيفة () { window.location.hash = href; }); عودة كاذبة. });

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

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