एक अलग ऑफसेट

के साथ विभिन्न वर्गों के लिए jQuery स्क्रिप्ट चिकनी स्क्रॉल मैं अपनी एक पेज साइट के लिए एक चिकनी स्क्रॉल स्क्रिप्ट का उपयोग कर रहा हूं। यह प्रत्येक एंकर पर स्क्रॉल करता है।एक अलग ऑफसेट

डिज़ाइन के कारण, मेरे पास सीधे पृष्ठ के शीर्ष पर एंकर स्नैप नहीं हो सकता है। मुझे छिपे हुए एंकर बनाना पड़ता है जो पेज को आगे बढ़ाते हैं, इसलिए यह बिल्कुल शीर्ष पर नहीं आ जाता है।

jQuery(document).ready(function($) { 
    $(".scroll").click(function(event){ 
     event.preventDefault(); 
     $('html,body').animate({ 
      scrollTop: $('[name="' + this.hash.substring(1) + '"]').offset().top 
     }, 500); 
    }); 
});

मैं सूचित किया गया है कि मैं ऑफसेट इस स्क्रिप्ट के भीतर ऐसा कर सकते हैं:

यहाँ स्क्रिप्ट मैं वर्तमान में उपयोग कर रहा हूँ है। इन छोटे छिपे हुए एंकरों को हर जगह रखने के बजाय, मैं बस कुछ निश्चित पिक्सेल द्वारा ऑफसेट करने के लिए शीर्ष के अंत में कुछ जोड़ सकता हूं। यह शीर्ष होगा - 250

$('html,body').animate({ 
    scrollTop:$('[name="' + this.hash.substring(1) + '"]').offset().top - 250 
}, 500);

समस्या यह होगा है ऑफसेट हमेशा 250px हो, मैं इसे चर करने की आवश्यकता है ताकि उदाहरण के लिए, पोर्टफोलियो div एक 200px की भरपाई के साथ लंगर डाले जा सकता है लेकिन केवल 50px से संपर्क div।

क्या कोई मुझे स्क्रिप्ट में किसी प्रकार का चयनकर्ता लिखने में मदद कर सकता है जो मुझे इस शीर्ष - [परिवर्तनीय] को समायोजित करने की अनुमति देगा जिसके आधार पर div को लगाया जा रहा है?

स्रोत

2012-08-09 Francesca

क्या आपने कोड के अपने स्निपेट को आजमाया है? यह काम करना चाहिए क्योंकि आपको एंकर का ऑफ़सेट मिल रहा है और गतिशील मान से 250 घटा रहा है। सुनिश्चित करने के लिए, ब्रैकेट के साथ अपनी गणना के आस-पास आज़माएं। – Bojangles

क्या आप http://jsfiddle.net/ पर कुछ सरल परीक्षण कोड प्रदान कर सकते हैं? सुनिश्चित नहीं है कि आपका 'div # contact' और 'div # पोर्टफोलियो कहां है। – Giberno

हाय, हाँ मैंने कोशिश की है। यह काम करता है, लेकिन यह हमेशा div से ऊपर 250px बैठता है, जो मैं नहीं चाहता हूं। – Francesca

आप वास्तव में नामांकित एंकर के शीर्ष मान के ऑफसेट को निर्धारित करने के नियमों पर संकेत नहीं दे रहे हैं।

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

इसलिए उदाहरण के लिए यहां एक नई विशेषता data-section-offset कहा जाता है के साथ एक नाम दिया है लंगर है और मैं चाहता हूँ 20px की भरपाई करने के लिए।

<a id="myAnchor" data-section-offset="20">My Section</a>

अपने क्लिक हैंडलर में आप एनीमेशन के लिए विशेषता मान खींच सकते हैं।

jQuery(document).ready(function($) { 

    $(".scroll").click(function(event) { 
     event.preventDefault();   
     var $anchor = $('#' + this.hash.substring(1)); 
     $('html,body').animate({ 
      scrollTop: $anchor.offset().top - $anchor.attr('data-section-offset') 
     }, 500);   
    }); 
});

यहां उदाहरण के लिए fiddle है।

नोट: JQuery डेटा विधि तो विशेषता या तो इस तरह खींचा जा सकता है (जैसा कि ऊपर)

$anchor.attr('data-section-offset')

है या इस तरह

$anchor.data('section-offset')

@Ben के रूप में बताया HTML5 specification for custom data attributes काफी उपयोगी है >HTML 5 data- Attributes।

स्रोत

2012-08-20 12:38:59

' और '' इसके अलावा आपकी कस्टम विशेषता पृष्ठ सत्यापन को तोड़ देगी। यह काम करेगा, लेकिन शायद यदि आप एक कस्टम विशेषता का उपयोग करना चाहते हैं, तो आपको कम से कम 'एचटीएमएल 5 मानक' डेटा-'के साथ प्रीपेड करके इसका उपयोग करना चाहिए। – BenSwayne

@BenSwayne आपकी टिप्पणी के लिए धन्यवाद - मुझे स्वीकार करना होगा कि मुझे कस्टम डेटा विशेषताओं के लिए HTML5 विनिर्देश के बारे में पता नहीं था। –

सबसे पहले, आपको पुराने <a name= सम्मेलन का उपयोग करने की आवश्यकता नहीं है। एंकर HTML anchors on w3schools पर w3schools पृष्ठ देखें। आईडी द्वारा कंटेनर तत्व को जोड़ने के लिए अब सबसे अच्छा अभ्यास है।

तो यदि आप कुछ सामग्री के साथ एक div से जुड़ रहे हैं, तो <div id="linkToMe">My content in here.</div> और <a href="#linkToMe">The link text</a> का उपयोग करें।

यह निश्चित रूप से आपके उपरोक्त कोड को तोड़ देगा क्योंकि यह नाम से तत्वों की तलाश में है। आप उन्हें आईडी द्वारा देखना चाहते हैं (वैसे भी तेज़!)।

मेरे वेबपृष्ठ में मेरे पास शीर्ष पर एक टूलबार है जो कभी-कभी position: fixed; होता है, इसलिए जब मैं स्क्रॉल करता हूं तो मैं स्क्रॉल स्थिति को ऑफ़सेट करना चाहता हूं, इसलिए यह पृष्ठ के शीर्ष पर मेरी टूलबार के नीचे नहीं जाता है।

इस तरह मैं यह कर:

function goToByScroll(id) { 
    //Find toolbar height 
    var pageOffset = 0, 
     hdr = $('#sub'), 
     tb = $('#sitemenu'); 
    if (hdr.css('position') == 'fixed') { pageOffset += hdr.height() } 
    if (tb.css('position') == 'fixed') { pageOffset += tb.height() } 

    //Scroll the document 
    $('html,body').animate({ scrollTop: $("#" + id).offset().top - pageOffset }, 'slow'); }

और फिर jQuery के साथ इसे तार:

$(".jumptoid").click(function (e) { 
    e.preventDefault(); 

    // Track in google analytics if you are using it. 
    _gaq.push(['_trackEvent', 'Jump to Id', e.currentTarget.host, this.href, 0]); 

    // Scroll to item location using jquery 
    goToByScroll(this.href.split('#')[1]); 

    // Push History in browser bar so the forward/back button works 
    window.location.hash = this.href.split('#')[1]; 

    return false; 
});

यह पूरी तरह से मेरी शीर्ष लेख के नीचे के साथ लक्ष्य तत्व के शीर्ष संरेखित होगा/टूलबार अगर वे निश्चित स्थिति हैं या ब्राउजर व्यूपोर्ट के शीर्ष हैं तो नहीं।

आपके मामले में आप या तो बदलने के लिए आप कैसे की गणना ऑफसेट चाहता हूँ (मेरे hdr और tb आइटम के स्थान पर, आप कुछ अन्य गणित या अन्य पृष्ठ तत्वों को देखो सकता है) या आप कस्टम विशेषता का उपयोग कर सकते के रूप में सुझाव @chris moutray द्वारा।

यदि आप एक विशेषता का उपयोग करना चाहते हैं, तो data- से शुरू होने के प्रस्तावित एचटीएमएल 5 मानक का उपयोग करें ताकि यह सत्यापन पास हो सके। <div id="linkToMe" data-scroll-offset="250">My content here</div> exmaple के लिए और फिर $anchor.attr('data-scroll-offset') जैसी विशेषता को पकड़ने के लिए @ क्रिस कोड का उपयोग करें।

स्रोत

2012-08-20 19:48:29 BenSwayne

हाय धन्यवाद, मैं इसमें देखता हूं और देखता हूं कि यह कैसे काम करता है। जिस कारण से मैं div कंटेनर से लिंक नहीं कर सकता, वह पूरी तरह से था क्योंकि यह कंटेनर को शीर्ष पर दाएं स्थान पर ले जाता है (जब मैं इसे थोड़ा ऑफसेट करना चाहता था) तो अगर यह काम करता है तो मैं बहुत खुश रहूंगा :) आपके समय के लिए धन्यवाद। – Francesca

@ फ्रांसेस्का हैस्लेल्डन हमें बताएं कि क्या आपकी समस्या का उत्तर स्वीकार कर हल किया गया है, अन्यथा यदि आपको और स्पष्टीकरण की आवश्यकता है तो टिप्पणी जोड़ने पर विचार करें और मुझे थोड़ा और जानकारी जोड़ने में खुशी होगी! – BenSwayne

उत्तर

संबंधित मुद्दे