एंकर लिंक पर क्लिक करने पर सहज स्क्रॉलिंग

एंकर लिंक के साथ एक वेबपेज नेविगेट करते समय, उपयोगकर्ता लक्ष्य अनुभाग में एक निर्बाध संक्रमण की उम्मीद करते हैं। हालाँकि, डिफ़ॉल्ट स्क्रॉलिंग व्यवहार अचानक हो सकता है। यह आलेख एंकर लिंक पर क्लिक करते समय सहज स्क्रॉलिंग प्राप्त करने के लिए तकनीकों की खोज करता है।

मूल समर्थन

क्रोम और फ़ायरफ़ॉक्स जैसे ब्राउज़रों ने सहज स्क्रॉलिंग के लिए मूल समर्थन पेश किया है। इसे दृश्य में स्क्रॉल करते समय "सुचारू" मान के साथ "व्यवहार" संपत्ति का उपयोग करके कार्यान्वित किया जाता है:

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

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

jQuery प्लगइन

पुराने ब्राउज़रों के लिए, एक jQuery प्लगइन स्क्रॉलिंग एनीमेशन को सुचारू कर सकता है। यह तकनीक पृष्ठ को लक्ष्य अनुभाग में ले जाने के लिए "चेतन" विधि का उपयोग करती है:

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});

उन्नत तकनीक

यदि लक्ष्य तत्व में आईडी का अभाव है, तो निम्नलिखित संशोधित jQuery प्लगइन का उपयोग किया जा सकता है:

$('a[href^="#"]').click(function () {
    $('html, body').animate({
        scrollTop: $('[name="'   $.attr(this, 'href').substr(1)   '"]').offset().top
    }, 500);

    return false;
});

प्रदर्शन अनुकूलन

एक चर के भीतर "$('html, body')" चयनकर्ता को कैशिंग करने से प्रदर्शन में वृद्धि होती है:

var $root = $('html, body');

$('a[href^="#"]').click(function () {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);

    return false;
});

यूआरएल हैश को संरक्षित करना

सुचारू स्क्रॉलिंग पर यूआरएल हैश को अपडेट करने के लिए, "एनिमेट" कॉलबैक का उपयोग करें:

var $root = $('html, body');

$('a[href^="#"]').click(function() {
    var href = $.attr(this, 'href');

    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });

    return false;
});

इन तकनीकों में से एक को लागू करके, आप एंकर लिंक का उपयोग करके अपने पेज पर नेविगेट करते समय एक बेहतर और उपयोगकर्ता के अनुकूल स्क्रॉलिंग अनुभव प्रदान कर सकते हैं।