[Javascript] दस्तावेज़ को कूदने के बिना मैं window.location.hash कैसे अपडेट कर सकता हूं?


Answers

समस्या यह है कि आप किसी तत्व की आईडी विशेषता में window.location.hash सेट कर रहे हैं। ब्राउजर के लिए उस तत्व पर कूदने के लिए यह अपेक्षित व्यवहार है, भले ही आप "रोकथाम ()" या नहीं।

इसके आस-पास जाने का एक तरीका हैश को एक मनमाना मूल्य के साथ उपसर्ग करना है:

window.location.hash = 'panel-' + id.replace('#', '');

फिर, आपको पृष्ठ लोड पर प्रीफिक्स्ड हैश की जांच करने की आवश्यकता है। एक अतिरिक्त बोनस के रूप में, आप अब तक स्क्रॉल भी कर सकते हैं क्योंकि अब आप हैश मान के नियंत्रण में हैं ...

$(function(){
    var h = window.location.hash.replace('panel-', '');
    if (h) {
        $('#slider').scrollTo(h, 800);
    }
});

यदि आपको हर समय काम करने की आवश्यकता है (और न केवल प्रारंभिक पृष्ठ लोड पर), तो आप हैश मान में परिवर्तनों की निगरानी करने के लिए फ़ंक्शन का उपयोग कर सकते हैं और फ्लाई पर सही तत्व पर जा सकते हैं:

var foundHash;
setInterval(function() {
    var h = window.location.hash.replace('panel-', '');
    if (h && h !== foundHash) {
        $('#slider').scrollTo(h, 800);
        foundHash = h;
    }
}, 100);
Question

मेरे पास मेरी वेबसाइट पर एक स्लाइडिंग पैनल स्थापित है।

जब यह एनिमेटिंग समाप्त हो गया, तो मैंने हैश को इस तरह सेट किया

function() {
   window.location.hash = id;
}

(यह एक कॉलबैक है, और id पहले सौंपा गया है)।

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

हालांकि, जब मैं हैश अपडेट करता हूं, तो ब्राउज़र स्थान पर कूद जाता है। मुझे लगता है कि यह व्यवहार की उम्मीद है।

मेरा सवाल है: मैं इसे कैसे रोक सकता हूं? मैं खिड़की के हैश को कैसे बदल सकता हूं, लेकिन यदि हैश मौजूद है तो ब्राउजर को तत्व पर स्क्रॉल नहीं किया जा सकता है? कुछ प्रकार की event.preventDefault() . event.preventDefault() चीज की तरह?

मैं jQuery 1.4 और स्क्रॉल करने के लिए प्लगइन का उपयोग कर रहा हूँ।

बहुत धन्यवाद!

अद्यतन करें

यहां वह कोड है जो पैनल को बदलता है।

$('#something a').click(function(event) {
    event.preventDefault();
    var link = $(this);
    var id = link[0].hash;

    $('#slider').scrollTo(id, 800, {
        onAfter: function() {

            link.parents('li').siblings().removeClass('active');
            link.parent().addClass('active');
            window.location.hash = id;

            }
    });
});



मुझे यकीन नहीं है कि क्या आप मूल तत्व को बदल सकते हैं लेकिन आईडी एटीआर का उपयोग डेटा आईडी जैसे किसी अन्य चीज़ से स्विच करने के बारे में कैसे करें? फिर बस अपने हैश मान के लिए डेटा-आईडी का मान पढ़ें और यह कूद नहीं जाएगा।




आपको वर्तमान स्क्रॉल स्थिति क्यों नहीं मिलती है, इसे एक चर में डाल दें, फिर हैश असाइन करें और पृष्ठ स्क्रॉल को वापस जहां रखें:

var yScroll=document.body.scrollTop;
window.location.hash = id;
document.body.scrollTop=yScroll;

यह काम करना चाहिए



Links