jQuery: स्क्रॉल जब URL बुला एंकर करने के लिए, की जगह ब्राउज़रों व्यवहार

Question

मैं पहले से ही jQuery प्लगइन ScrollTo पता है, लेकिन मैं अब तक निम्नलिखित साकार करने के लिए किसी भी तरह से नहीं मिला:

उपयोगकर्ताओं मेरी साइट के लिए हो जाता है (टाइप करके, मेरे पृष्ठ पर एक लिंक पर क्लिक करके) domain.com/bla.php#foo

और एंकर "#foo" मौजूद है। अब मैं चाहता हूं कि उपयोगकर्ता का ब्राउज़र स्वचालित रूप से "#foo" पर स्क्रॉल नहीं करता है, इसके बजाय मैं आसानी से स्क्रॉल करना चाहता हूं ताकि तत्व '#foo' दृश्य के बीच में हो और न कि पूर्ण शीर्ष स्थिति पर उपयोगकर्ता देखते हैं।

अब तक धन्यवाद!

Answer 1

यदि आप वास्तविक एंकर foo नहीं बनाते हैं, बल्कि _foo (<a id="_foo"> जैसे कुछ) के साथ अपना एंकर बनाएं। इसे प्राप्त करने के लिए आप $(document).ready को संभाल सकते हैं।

कुछ की तरह (छद्म कोड)

$(document).ready(function() { 
    var elem = $('#_' + window.location.hash.replace('#', '')); 
    if(elem) { 
     $.scrollTo(elem.left, elem.top); 
    } 
}); 

Answer 2

कि संभव

संपादित

व्यवहार नहीं है यूए के हाथों में पूरी तरह से है।

Answer 3

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

सुनिश्चित नहीं है कि पृष्ठ के मध्य में आइटम कैसे प्राप्त करें लेकिन आप स्क्रॉलिंग के लिए ऑफ़सेट निर्दिष्ट कर सकते हैं।

Answer 4

मैं यह नहीं कहना चाहता कि यह असंभव है, लेकिन ... यह कम से कम चुनौतीपूर्ण होगा। ब्राउज़र (या कम से कम उन सभी जिन्हें मैं जानता हूं) पृष्ठ के उस हिस्से के रूप में जैसे ही एंकर पॉइंट पर स्क्रॉल करता है; AFAIK से बचने के लिए कोई जावास्क्रिप्ट-आधारित तरीका नहीं है (आपको ब्राउज़र प्लग-इन या कुछ चाहिए)।

हालांकि, मुझे लगता है कि आप संभावित रूप से इच्छित व्यवहार प्राप्त करने के लिए "पृष्ठ को पूरी तरह से लोड होने तक पृष्ठ को न दिखाएं" के एक संस्करण का उपयोग करने में सक्षम हो सकते हैं। दूसरे शब्दों में, क्या तुम करोगी:

1. छिपाएं अपने पेज की सामग्री पूर्व लोड के सभी (यानी एक DIV है कि अपने पूरे पृष्ठ लपेटता है, और एक "प्रदर्शन: कोई" डाल दिया। इस पर शैली)

2. पृष्ठ अन-छुपाता अपने DIV के लिए एक "ऑनलोड" ईवेंट हैंडलर संलग्न, और ...

3. है कि एक ही "ऑनलोड" ईवेंट हैंडलर में, स्क्रॉल करने के लिए एक मानक जे एस स्क्रॉल तंत्र (ie.ScrollTo) का उपयोग एंकर के लिए (मुझे लगता है कि आप यह निर्धारित करने में सक्षम होंगे कि window.location की जांच करके कौन सा एंकर स्क्रॉल करना है)

सिद्धांत रूप में, क्योंकि # 1 और # 2 (और के बीच ब्राउज़र इच्छा ब्राउज़र-पुस्तक वहाँ कहीं नहीं स्क्रॉल करने के लिए करने के लिए, सामग्री के साथ क्या छुपाई जा रही है और सभी, मैं यह सिर्फ सब कुछ नहीं करेंगे कल्पना है, क्योंकि), आपके द्वारा # 3 में उपयोग की जाने वाली स्क्रॉलिंग तंत्र में कोई हस्तक्षेप नहीं होना चाहिए।

कहा जा रहा है, ऊपर के सभी एक पूरी तरह से अपरीक्षित योजना है, आपका माइलेज मेरा अलग-अलग है। यहां तक ​​कि अगर यह काम करता है, तो यह लागू करने के लिए एक दर्द होने जा रहा है, इसलिए जब तक आप वास्तव में इस व्यवहार को चाहते हैं, तो यह लगभग निश्चित रूप से परेशानी के लायक नहीं है।

$(document).ready(function() { 
    // replace # with #_ in all links containing # 
    $('a[href*=#]').each(function() { 
     $(this).attr('href', $(this).attr('href').replace('#', '#_')); 
    }); 

    // scrollTo if #_ found 
    hashname = window.location.hash.replace('#_', ''); 
    // find element to scroll to (<a name=""> or anything with particular id) 
    elem = $('a[name="' + hashname + '"],#' + hashname); 

    if(elem) { 
     $(document).scrollTo(elem, 800); 
    } 

}); 

यह लिंक में सभी एंकर बदल कर उपयोगकर्ताओं के लिए जावास्क्रिप्ट बिना व्यवहार अछूता रहेगा:

Answer 5

मैं तो यह अब इस तरह दिखता जनवरी Jongboom से स्क्रिप्ट के लिए कुछ वृद्धि कर दिया।

Answer 6

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

URL ऐसा दिखाई देगा:

// Get any params from the URL 
$.extend({ 
    getUrlVars: function(){ 
    var vars = [], hash; 
    var url = decodeURIComponent(window.location.href); 
    var hashes = url.slice(window.location.href.indexOf('?') + 1).split('&'); 
    for(var i = 0; i < hashes.length; i++) 
    { 
     hash = hashes[i].split('='); 
     vars.push(hash[0]); 
     vars[hash[0]] = hash[1]; 
    } 
    return vars; 
    }, 
    getUrlVar: function(name){ 
    return $.getUrlVars()[name]; 
} 
}); 

$(document).ready(function() { 
    // Unhide the main content area 
    $('section.centered').fadeIn('slow'); 

    // Create a var out of the URL param that we can scroll to 
    var page = $.getUrlVar('page'); 
    var scrollElement = '#' + page; 

    // Scroll down to the newly specified anchor point 
    var destination = $(scrollElement).offset().top; 
    $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-75}, 800); 
    return false; 
}); 

मैं जाँच:

www.mysite.com/hello/world.htm?page=contact 

संपर्क आईडी आप

<h1 id="contact">Contact Us</h1> 

यहाँ करने के लिए स्क्रॉल करने के लिए चाहते हैं उसका नाम है कोड है यह क्रोम और एफएफ में और यह बहुत अच्छी तरह से काम किया। यदि स्क्रॉल लक्ष्य उस सटीक स्थान पर नहीं जा रहा है, जिसे आप चाहते हैं तो "गंतव्य -75" समायोजित करने का प्रयास करें।

मैं उपर्युक्त पदों के साथ इसे नहीं कर सका, इसलिए धन्यवाद!

Answer 7

/* scrolling to element */ 
    var headerHeight = $('#header').height() + $('#header-bottom-cap').height() + 10; //When the header position is fixed 
    $('a').click(function(){ 
     var hashEle = $(this).attr('href').split('#'); 
     if (hashEle.length > 1) { 
      if (hashEle[1] == 'top') { 
       $('body, html').animate({ 
        scrollTop: 0 
       },500); 
      } else { 
      jQuery('body, html').animate({ 
       scrollTop: $('#'+ hashEle[1]).offset().top - headerHeight 
      },500); 
      } 
     }; 
    }) 
     // find element from url 
hashname = window.location.hash.replace('#', ''); 
elem = $('#' + hashname); 
if(hashname.length > 1) { 
    if(hashname == 'top') { 
    $('body, html').animate({ 
      scrollTop: 0 
     },200); 
    } else { 
    $('body, html').animate({ 
      scrollTop: $(elem).offset().top - headerHeight 
     },500); 
} 
}; 
/* END scrolling to element */ 

यह स्क्रिप्ट $ (दस्तावेज़) में होना चाहिए .ready (function() {});