animate.scrolltop और (target) .offset() शीर्ष के साथ एक निश्चित शीर्षलेख के लिए लेखांकन;

Question

यह एक बहुत ही बुनियादी सवाल होना चाहिए, लेकिन मैंने अपनी अधिकांश सुबह इसे फेंक दिया है, और इस बिंदु पर मैं तौलिया में फेंकने के करीब हूं। मैं भी नहीं js foo का एक छोटा सा है - लेकिन मैं कोड की एक अच्छी तरह से टिप्पणी की हिस्सा है कि मैं लंगर लिंक यह है चेतन करने के लिए उपयोग करने के लिए आशा करती हूं कि पाया:

$(document).ready(function() { 
$('a[href*=#]').bind('click', function(e) { 
e.preventDefault(); //prevent the "normal" behaviour which would be a "hard" jump 

var target = $(this).attr("href"); //Get the target 

var scrollToPosition = $(target).offset().top; 

// perform animated scrolling by getting top-position of target-element and set it  as scroll target 
$('html, body').stop().animate({ scrollTop: scrollToPosition}, 600, function() { 
    location.hash = target; //attach the hash (#jumptarget) to the pageurl 
}); 

return false; 

}); 
}); 

मैं करने के लिए इसे पाने के लिए कोशिश कर रहा हूँ । ऑफसेट() शीर्ष ऊपर भूमि 30px - यह सही स्थान पर जाए, लेकिन फिर वह बाउंस हो गया - मैं

$('html, body').stop().animate({ scrollTop: scrollToPosition -30}, 600,

कौन सा लगभग काम करता है की कोशिश की।

मैं भी कोशिश की है

scrollTop: $(target).offset().top - 20 },

मैं भी

scrollTop: $(hash).offset().top + $('#access').outerHeight()

कौन सा कुछ भी बदलने नहीं लगता है की कोशिश की है।

ऐसा लगता है कि उत्तर यहां हो सकता है: JQuery page scroll issue with fixed header लेकिन मुझे लगता है कि यह काफी प्रतीत नहीं होता है।

मुझे पता है कि यह अन्य प्रश्नों के समान है - लेकिन मैं जो भी पा सकता हूं उसके माध्यम से चला गया हूं और मैं इतना अशिक्षित हूं कि मैं इस मुद्दे को हल करने वाली किसी भी चीज में कॉपी/पेस्ट करने में सक्षम नहीं हूं।

मैं समाधान के लिए अविश्वसनीय रूप से आभारी हूं।

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

मार्टिन

पुनश्च

मैंने पाया कोड का यह अन्य हिस्सा काम करता है, लेकिन यह हैशटैग बाहर है, जो यह ज्यादातर बेकार बना देता है अलग करना है।

$(function(){ 
$('a[href*=#]').click(function() { 
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
    && location.hostname == this.hostname) { 
     var $target = $(this.hash); 
     $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); 
     if ($target.length) { 
      var targetOffset = $target.offset().top; 
      $('html,body').animate({scrollTop: targetOffset - 30}, 1000); 
      return false; 
     } 
    } 
    }); 
}); 

Answer 1

संपादित: तुम बस तय हैडर की ऊंचाई का पता लगाने और घटाना है कि scrollToPosition जो आप सही तरीके से कर रहे थे से की जरूरत है। मुद्दा window.location.hash = "" + target; उस आईडी के साथ तत्व के शीर्ष पर पृष्ठ को कूदता है। तो यदि आप वहां पर एनिमेट करते हैं जैसे आप कर रहे थे और फिर उस हैश में बदल जाए तो यह आपके जैसा वर्णन किया गया है "वापस उछाल" होगा। http://jsfiddle.net/yjcRv/1/

को और संपादित: एक हैश परिवर्तन की घटनाओं को नियंत्रित करने के और भी बेहतर तरीका है

// Get the height of the header 
var headerHeight = $("div#header").height(); 

// Attach the click event 
$('a[href*=#]').bind("click", function(e) { 
    e.preventDefault(); 

    var target = $(this).attr("href"); //Get the target 
    var scrollToPosition = $(target).offset().top - headerHeight; 

    $('html').animate({ 'scrollTop': scrollToPosition }, 600, function(){ 
     window.location.hash = "" + target; 
     // This hash change will jump the page to the top of the div with the same id 
     // so we need to force the page to back to the end of the animation 
     $('html').animate({ 'scrollTop': scrollToPosition }, 0); 
    }); 

    $('body').append("called"); 
}); 

यहाँ एक नई यह पहली विधि के लिए jsfiddle है: पहला तरीका है कि हम इस से मुकाबला कर सकती है jQuery Address जैसे प्लगइन का उपयोग करें। इसके साथ आप अपने हैशचेंज घटनाओं का अधिक उपयोग कर सकते हैं।यहाँ एक उदाहरण उपयोग है:

// Get the height of the header 
var headerHeight = $("div#header").height(); 

$.address.change(function(evt){ 
    var target = "#" + evt["pathNames"][0]; //Get the target from the event data 

    // If there's been some content requested go to it…else go to the top 
    if(evt["pathNames"][0]){ 
     var scrollToPosition = $(target).offset().top - headerHeight; 
     $('html').animate({ 'scrollTop': scrollToPosition }, 600); 
    }else{ 
     $('html').animate({ 'scrollTop': '0' }, 600); 
    } 

    return false; 
}); 

// Attach the click event 
$('a').bind("click", function(e) { 
    // Change the location 
    $.address.value($(this).attr("href")); 

    return false; 
}); 

लाइव यहाँ उदाहरण: http://www.vdotgood.com/stack/user3444.html

नोट: अब आप अपने लिंक href विशेषता के हैश जोड़ने की जरूरत नहीं है।

$("a.myclass").click(function(){ 
    $.address.value($(this).attr("href")); 
    return false; 
}); 

---

jQuery पता वास्तव में लिंक के लिए दिखता है:

<!-- This is correct --> 
<a href="/target" class="myclass">Target</a> 

<!-- These are incorrect --> 
<a href="/#/target" class="myclass">Target</a> 

<a href="#/target" class="myclass">Target</a> 

इस लिंक आप की तरह एक चयनकर्ता का उपयोग होता है लक्षित करने के लिए: यहाँ है कि आप एक jQuery चयनकर्ता के साथ लक्ष्य बना सकते हैं एक लिंक भी है कि निम्न विशेषता है:

<a href="/target" rel="address:/target">Target</a> 

rel यहाँ विशेषता शेष भाग एन्स address: इस मामले में /target में आपके द्वारा परिभाषित एक सापेक्ष यूआरएल के बाद। यदि आप इसका उपयोग करते हैं, तो jQuery पता लिंक का पता लगाएगा और हैश चेंज इवेंट को स्वचालित रूप से आग लगा देगा।

Answer 2

मुझे पता है कि यह एक पुराना प्रश्न है (तरह) लेकिन मैं एक वेबसाइट पर एक निश्चित ड्रॉपडाउन नेविगेशन के साथ एक ही समस्या में भाग गया। ध्यान दें यह एक चिकनी स्क्रॉल कोड स्निपेट है, हालांकि आप आसानी से एनीमेशन गति को बदलकर इसे स्वचालित बना सकते हैं।

jQuery:

$('body').on('click','a[href^="#"]',function(event){ 
    event.preventDefault(); 
    var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0; 
    //change this number to create the additional off set   
    var customoffset = 75 
    $('html, body').animate({scrollTop:target_offset - customoffset}, 500); 
}); 

मैं किसी भी मुद्दे के बिना एक लंबे समय के लिए कोड के इस हिस्से का इस्तेमाल किया है। केवल एक चीज जिसे मैं इसके बारे में नापसंद करता हूं, क्या यह किसी भी # टैग को पकड़ लेगा। तो फ्लेक्सस्लाइडर प्लगइन जैसी प्लगइन में जहां नेविगेशन # का उपयोग करता है I मैन्युअल रूप से प्लगइन से उन्हें पट्टी करता है।

Answer 3

मैंने मूल स्क्रिप्ट को http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery से tweaked किया है। यह आश्चर्यजनक काम करता है लेकिन आप देरी को सेट नहीं कर सकते हैं।

var headerHeight = $("header").height(); 


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

     var target = this.hash, 
     $target = $(target); 

     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top - headerHeight 
     }, 1200, 'swing', function() { 
      window.location.hash = target ; 
     }); 
    }); 
}); 

हाँ, मैं थोड़ा देर हो रही है, लेकिन इस समस्या को सिर्फ मेरे लिए हुआ ... चीयर्स!