bootstrap.js एनिमेटेड स्क्रॉल

मैं वर्तमान में इस प्लगइन का उपयोग कर रहा साथ Scrollspy http://twitter.github.com/bootstrap/javascript.html#scrollspy bootstrap.js एनिमेटेड स्क्रॉल

बहरहाल, यह एक विकल्प प्रदान नहीं करता है क्लिक करते समय स्क्रॉल आंदोलन को एनिमेट करने के लिए। मैं इसे कैसे जोड़ सकता हूं?

स्रोत

2012-01-03 thv20

आपको http://plugins.jquery.com/scrollTo/ पर एक नज़र रखना चाहिए, यह बूटस्ट्रैप के साथ गठबंधन करने के लिए आसान सरल होना चाहिए। यदि आप चाहें तो इसे खुशी से कार्यान्वित करने के बारे में अधिक विस्तृत स्पष्टीकरण देंगे।

स्रोत

2012-01-03 11:22:41 FlabbyRabbit

एक छोटी सी और अधिक मदद की जगह की भरपाई के लिए कर रहे हैं सुनिश्चित करें जोड़ें बहुत अच्छा होगा! मैं स्क्रॉल को कमांड कहां डालूं, उदाहरण के लिए '$ .scrollTo ('#' + target ', 1000);'? – thv20

स्क्रोलस्पी तत्व को आंदोलन को संभाल नहीं करता है, यह ब्राउज़र द्वारा मूल रूप से किया जाता है।सभी स्क्रॉल जासूस करता है चयनित तत्व को उपयोगकर्ता स्क्रॉल के रूप में बदलता है। यहां स्क्रॉल का एक त्वरित कार्यान्वयन है जो मदद करनी चाहिए: http://jsfiddle.net/flabbyrabbit/69z7x/ – FlabbyRabbit

शानदार! एक अंतिम सवाल, क्या मैं टॉप ऑफसेट सेट कर सकता हूं? कृपया संदर्भ के लिए यहां देखें: http://jsfiddle.net/69z7x/5/ तो यहां एक 200px ऑफ़सेट होगा। – thv20

के साथ या बिना बूटस्ट्रैप

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.3/jquery.scrollTo.min.js"></script> 
<script> 
$(function() { 
    $('#yournav').bind('click', 'ul li a', function(event) { 
     $.scrollTo(event.target.hash, 250); 
    }); 
}); 
</script>

स्रोत

2013-03-24 07:51:48 Casey

में स्क्रॉलस्पी के साथ झिलमिलाहट रोकने के लिए, event.preventDefault() – suda

जोड़ सकते हैं यह पूरी तरह से काम करता है मेरे लिए! – Migisha

यह मूलतः ऊपर जवाब का एक विस्तार है, लेकिन मैं उन्हें एक और अधिक एकीकृत दृष्टिकोण के लिए कुछ अलग ढंग से लागू किया। मुझे मौलिकता के लिए किसी भी अंक की उम्मीद नहीं है लेकिन शायद यह किसी की मदद कर सकता है।

ऊपर जवाब में उल्लेख किया है, scrollTo() स्क्रिप्ट जोड़ने: सही this.process() जोड़ने के तहत,

// SCROLLSPY CLASS DEFINITION 
// ==========================

चर घोषणाओं में:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.3/jquery.scrollTo.min.js"></script>

bootstrap.js फ़ाइल खोजने में परिवर्तनीय:
this.scroll()

फिरके ठीक नीचेसमारोह, और इसके बाद के संस्करण:

// SCROLLSPY PLUGIN DEFINITION 
// ===========================

अपने पुस्तक() विधि जोड़ें:

ScrollSpy.prototype.scroll = function (target) { 
    $('#spyOnThis').bind('click', 'ul li a', function(event) { 
     $.scrollTo(event.target.hash, 250); 
    }); 
};

यह मेरे लिए काम किया। उपरोक्त सहायक सलाह के लिए फिर से धन्यवाद।

स्रोत

2014-01-11 17:46:27

यह jQuery.localScroll के साथ एक एक लाइनर है:

$.localScroll();

स्रोत

2014-01-19 07:01:23

ठीक है दोस्तों, किसी भी अतिरिक्त व्यर्थ js प्लगइन्स जोड़ने की आवश्यकता नहीं।

शरीर को यह जोड़े

<body data-spy="scroll" data-offset="500" data-target="#navbar">

अपने विषय को custom.js जोड़ें या सिर्फ एक और उचित फ़ाइल का उपयोग करें।

इस

// strict just to keep concept of bootstrap 
+function ($) { 
    'use strict'; 


// spy and scroll menu boogey 
$("#navbar ul li a[href^='#']").on('click', function(e) { 

    // prevent default anchor click behavior 
    e.preventDefault() 

    // store hash 
    var hash = this.hash 

    // animate 
    $('html, body').animate({ 
     scrollTop: $(this.hash).offset().top -500 
    }, 1000, function(){ 
     window.location.hash = hash -500 
    }) 

}) 

}(jQuery);

custom.js को आप शरीर में <tag id="#myLink"></tag> और <a href="#myLink>

data-offset="500" का उपयोग और समारोह में -500 स्थानों एक स्क्रॉल

स्रोत

2014-05-28 10:22:18

यह मेरे लिए एनिमेट नहीं है। क्या आप मेरी मदद कर सकते हैं? – offset

उत्तर

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