jQuery स्क्रॉल अच्छी तरह से पोजीशनिंग नहीं कर रहा है

Question

मैं पृष्ठ पर स्क्रॉलिंग प्रभाव बनाने की कोशिश कर रहा हूं, स्क्रॉल एक आसान प्रभाव बनाता है लेकिन यह आइटम की वास्तविक स्थिति को याद करता है, और कुछ स्थिति क्लिक के बाद बग शुरू करता है।

उदाहरण के लिए यदि आप अंतिम आइटम पर क्लिक करते हैं तो यह वहां जाता है, लेकिन इसके बाद यदि आप तीसरे स्थान पर क्लिक करते हैं तो स्क्रॉल शीर्ष पर जाता है (?)। तो मुझे लगता है कि मैं यहाँ कुछ याद कर रहा हूँ। कोई भी जानता है कि समस्या को कैसे ठीक किया जाए?

इस

मेरी मार्कअप है:

  <div id="sidebar" class="clearfix"> 
       <ul> 
        <li> 
         <a href="#one" class="scroll">Muscles - Girls Crazy Go!</a> 
        </li> 
        <li> 
         <a href="#two" class="scroll">Tokyo Youth sports</a> 
        </li> 
        <li> 
         <a href="#three" class="scroll">Harajuku Interviews</a> 
        </li> 
        <li> 
         <a href="#four" class="scroll">Tokyo Youth</a> 
        </li> 
       </ul> 
      </div> 

डिव उदाहरण स्क्रॉल करने के लिए:

    <div class="cinematography_box clearfix" id="two"> 
         <div class="cinematography_item"> 
          <img src="img/cinematography.jpg" alt="cinematography" width="700" height="397"> 
         </div> 
         <div class="cinematography_info"> 
         </div> 
        </div> 

और मेरी स्क्रिप्ट:

jQuery(document).ready(function($) { 
     $(".scroll").click(function(event){  
      event.preventDefault(); 
      $('#main').animate({scrollTop:$(this.hash).offset().top}, 500); 
     }); 
    }); 

मैं एक प्लगइन के बिना यह करने के लिए कोशिश कर रहा है इसलिए यदि इस कोड के साथ कोई समाधान है तो यह बेहतर होगा!

Answer 1

क्या तुम यहाँ का उपयोग करना चाहते .position(), .offset() नहीं है का प्रयास करें:

$(".scroll").click(function(event){  
    event.preventDefault(); 
    var scroll_to = $('#' + $(this).data('scroll-to')).position().top; 
    $('#main').animate({ scrollTop:scroll_to }, 500); 
    }); 

आप इसे गूगल क्रोम कंसोल में जल्दी की कोशिश कर सकते टाइप करके:

$(".scroll").off("click"); 
$(".scroll").click(function(event){  
    event.preventDefault(); 
    var scroll_to = $('#' + $(this).data('scroll-to')).position().top; 
    $('#main').animate({ scrollTop:scroll_to }, 500); 
}); 

बाद Enter दबाएं। यह आपके श्रोता को मार देगा और इस नए को संलग्न करेगा।

ध्यान दें कि यह 1212x margin-top#gallery.cinematography पर थोड़ा सा बंद है। या तो इसे छोड़ दें या 12 से scroll_to

JQuery का दस्तावेज़ बहुत आत्म-स्पष्टीकरणपूर्ण है, लेकिन यह पूछने में संकोच न करें कि कुछ ऐसा नहीं है जिसे आप समझ में नहीं आते हैं।

Answer 2

आप जिस शीर्ष ऑफसेट का उपयोग कर रहे हैं वह तत्व #main से है और आप इसे .scroll तत्व से हैश के समान आईडी के साथ चाहते हैं।

एचटीएमएल:

<ul> 
    <li> 
     <a href="#one" data-scroll-to="one" class="scroll">Muscles - Girls Crazy Go!</a> 
    </li> 
    <li> 
     <a href="#two" data-scroll-to="two" class="scroll">Tokyo Youth sports</a> 
    </li> 
... 

jQuery: में कोड बदलें

jQuery(document).ready(function($) {   
    $(".scroll").click(function(event){  
     event.preventDefault(); 

     var scroll_to = $('#' + $(this).data('scroll-to')).offset().top;    
     $('#main').animate({ scrollTop:scroll_to }, 500); 
    }); 
}); 

Answer 3

यह

$(document).ready(function() { 
    $(".scroll").click(function(event){ 
     event.preventDefault(); 
     var obj = $.browser.webkit ? $('body') : $('html'); 
     obj.animate({ scrollTop: $('#sidebar').offset().top }, 750, function(){ 
      //callback function if any 
     }); 
    }); 
});