2012-08-05 22 views
6

मेरे होम पेज के नीचे मैंने एक संपर्क फ़ॉर्म शामिल किया है और इस अनुभाग के लिए एंकर को div id = "contact" के रूप में निर्दिष्ट किया है।अलग-अलग पेज से लिंक -> विशिष्ट एंकर पर jquery स्क्रॉल

जब किसी भी पृष्ठ पर संपर्क बटन क्लिक किया जाता है तो उसे मुखपृष्ठ पर और पृष्ठ लोड पर नेविगेट करना चाहिए, स्वचालित रूप से संपर्क फ़ॉर्म पर स्क्रॉल करना चाहिए।

मैं एक ऐसी ही सवाल मैं यहां पाया समीक्षा करने के बाद काम करने के लिए इस प्राप्त करने में असफल रहा है: jQuery scroll to ID from different page जब मैं कोशिश, यह सिर्फ फार्म के लिए कूदता है। मैं इसे आसानी से स्क्रॉल करना चाहता हूं।

(function($){ 
    var jump=function(e) { 
     if (e) { 
      e.preventDefault(); 
      var target = $(this).attr("href"); 
     } else { 
      var target = location.hash; 
     } 

     $('html,body').animate({ 
      scrollTop: $(target).offset().top 
     },1000,function() { 
      location.hash = target; 
     }); 
    } 

    $('html, body').hide() 

    $(document).ready(function() { 
     $('a[href^=#]').bind("click", jump); 

    if (location.hash) { 
     setTimeout(function(){ 
      $('html, body').scrollTop(0).show() 
      jump() 
     }, 0); 
    } else { 
     $('html, body').show() 
    } 
}); 

मैं इस उदाहरण की तरह कुछ प्राप्त करने के लिए कोशिश कर रहा हूँ: http://vostrel.cz/so/9652944/page.html अंतर के बजाय कि जा रहा है

<li><span>Get in touch</span><a href="index.html#contact">Contact</a></li> 

समस्या jQuery समारोह अन्य पृष्ठों से होम पेज पर संपर्क लंगर के लिए स्क्रॉल करने के लिए इस मामले में "एंकर आईडी" दोनों पृष्ठों पर दिखाई दे रहा है, मेरे लिए एंकर आईडी (संपर्क) केवल एक पृष्ठ (घर) पर दिखाई देता है।

उत्तर

0

मुझे यकीन नहीं है कि आपका कोड क्या है, लेकिन मैं इसे काम करने में सक्षम हूं। एक बात यह है कि, आपके द्वारा पोस्ट किया गया कोड, अंत में })(jQuery) गुम है। वैसे भी, जांचें कि मैंने here क्या किया है, मुझे लगता है कि यह वही है जो आप खोज रहे हैं। मुझे यकीन नहीं है कि आपकी वेबसाइट का HTML कैसा दिखता है, लेकिन मुझे लगता है कि आप इसे अनुकूलित कर सकते हैं। आपको बस इतना करना है कि संपर्क बटन की href विशेषता index.html#contact पर सेट करें। Index.html पर, आप केवल #contact का उपयोग कर सकते हैं और यह वही काम करेगा।

index.html में, हैडर:

<div id="header"> 
    <a href="index.html">Homepage</a> 
    <a href="otherpage.html">Other page</a> 
    <a href="otherpage2.html">Another Page</a> 
    <a href="#contact">Contact</a> 
</div> 

लेकिन किसी अन्य पेज में:

<div id="header"> 
    <a href="index.html">Homepage</a> 
    <a href="otherpage.html">Other page</a> 
    <a href="otherpage2.html">Another Page</a> 
    <a href="index.html#contact">Contact</a> 
</div> 

index.html में शीर्षक में index.html को हटाने के दो बार लोड किए जाने से पेज को रोकता है, तो यह है कि jQuery बस पृष्ठ को नीचे स्क्रॉल करता है।

क्योंकि आप एंकर टैग के href विशेषता का उपयोग कर रहे हैं, यह #contact के रूप में पदभार आता है, जो jQuery एक आईडी के रूप में व्याख्या: जबकि अपने कोड का परीक्षण

0

लिटिल टिप मैं भर में आया था।

इसे चालू करने के लिए आपको एंकर पर एक आईडी = "संपर्क" जोड़ने की आवश्यकता होगी, चाहे वह पृष्ठ चालू हो।

1

इस प्रयास करें, अपनी स्क्रिप्ट ठीक है केवल अंतिम पंक्ति याद आ रही है

(function ($) { 

    var jump = function (e) { 
     if (e) { 

      e.preventDefault(); 
      var target = $(this).attr("href"); 

     } else { 

      var target = location.hash; 

     } 
     $('html,body').animate({ 

      scrollTop: $(target).offset().top 

     }, 1000, function() { 

      location.hash = target; 

     }); 
    } 

    $('html, body').hide(); 

    $(document).ready(function() { 
     $('a[href^=#]').bind("click", jump); 

     if (location.hash) { 
      setTimeout(function() { 

       $('html, body').scrollTop(0).show() 
       jump(); 

      }, 0); 
     } else { 

      $('html, body').show(); 

     } 
    }); 
})(jQuery)