javascript - jQuery fadeIn Messing up #hashtag Cross-linking -


ठीक है, इसलिए मेरे पास एक संपूर्ण पृष्ठ छुपाएं / फ़ेडइन प्रभाव jQuery के साथ हो रहा है सब कुछ ठीक से काम कर रहा था जब तक मुझे एहसास नहीं हुआ कि देरी () + fadeIn () मेरे कारण हो रहा है

& lt; a href = "http : //example.com/my_page/#my_ID "& gt; हैशटैग लिंक & lt; / a & gt;

शीर्ष पर स्क्रॉल की स्थिति के साथ लोड करने के बजाय उस कोड को जहां से #my_ID < / कोड> पृष्ठ पर है।

मुझे पता है कि यह पूरे पृष्ठ से संबंधित है देरी () // fadeIn () प्रभाव

मजबूत> संपादित करें

यह प्रासंगिक jQuery कोड है:

  // # curtain div छिपा हुआ है और #bgImage (पर्दा) लोड होने पर बाद में फ़ेड हो जाता है - क्रोम वर् में सभी "रिबन" लोडिंग प्रभाव को रोकता है = ग़लत; Var url = $ ('। BgImage')। Attr ('src'); Var img = नया चित्र (); Img.onload = function () {if (! AllDone) {$ ('# curtain')। देरी (1500)। FadeIn (1000); AllDone = true; }}; SetTimeout (आईएमजी.ओलोड, 2000); // छुपा सामान 5 सेकंड के बाद, छवि या कोई छवि img.src = url;    

एक पर पहली नज़र में, यह लगता है कि संपूर्ण पृष्ठ की सामग्री शुरू में छिपी हुई है। जब ब्राउज़र पृष्ठ को लोड कर रहा है, तो यह URL टुकड़ा में पहचाना जाने वाला तत्व ढूंढना शुरू करेगा; वह तत्व छुपा हुआ या दिखाई नहीं देगा और इसलिए इसे स्क्रॉल करने के लिए कोई उपयोगी स्थिति नहीं होगी और स्क्रॉल स्थिति में कुछ नहीं होता है।

मुझे लगता है कि ऐसा करने के लिए सबसे आसान बात स्क्रॉलिंग को संभालना होगा कॉलबैक में:

  • टुकड़ा को window.location.hash से बाहर ले जाओ।
  • पता लगाएं कि वह पृष्ठ पर कहां से है : var y = $ ('#' + window.location.hash) .ऑफ़सेट ()। शीर्ष;
  • फिर उस स्थिति में पृष्ठ स्क्रॉल करें:
    $ ('html, body')। Attr ('scrollTop', y);

    आप scrollTop अगर आप चाहें तो बदलाव करना चाहते हैं।

    आपको शुरू करने के लिए यहां एक उदाहरण दिया गया है:

      $ ('# curtain')। देरी (1500) .फ़ेड इन (1000, समारोह () {// किसी भी हश नहीं है अगर बाहर जमानत। अगर (! Window.location.hash) वापसी; // एक तत्व को हैश कन्वर्ट और बाहर जमानत / अगर ऐसी कोई तत्व नहीं है। Var $ e = $ (Window.location.hash); यदि ($ e.length & lt; 1) रिटर्न; // और अंत में, हम जो करें यहाँ करने के लिए $ ('एचटीएमएल, बॉडी') एट्र ('स्क्रोलटॉप', $ ई.ऑफसेट ()। शीर्ष); });   

    यदि आप स्क्रॉलिंग करना चाहते हैं तो आप $ ('html, body') बदल सकते हैं। Attr (...) इस तरह से कुछ भाग :

      $ ('html, body')। चेतन ({scrollTop: '+ =' + $ e.offset ()। शीर्ष}, 'तेज');    

Comments