jQuery एनिमेट स्क्रॉल

मुझे यकीन नहीं है कि प्रभाव कैसे कॉल करें, लेकिन क्या कोई मुझे लाइब्रेरी में इंगित कर सकता है जो मुझे इस वेबसाइट के समान प्रभाव करने में मदद करेगा?jQuery एनिमेट स्क्रॉल

http://www.makr.com

असल में, यह पंक्ति माउस क्लिक पर पृष्ठ के शीर्ष पर ले जाता है। एक कोड स्निपेट, अधिमानतः jQuery, अगर इसके लिए कोई विशेष प्रभाव पुस्तकालय नहीं है, तो मदद कर सकता है।

मुझे यकीन नहीं है कि मुझे एक और विषय शुरू करने की आवश्यकता है, लेकिन क्या कोई मुझे मकर यूआई के पूरे प्रभाव को प्राप्त करने के लिए एक छोटे से jQuery स्निपेट के साथ मदद कर सकता है?

स्रोत

2011-11-08 Marvzz

इम यकीन नहीं अगर मैं एक अन्य विषय शुरू करने की आवश्यकता है, लेकिन किसी को भी एक छोटा सा jQuery स्निपेट के साथ मेरी मदद कर सकते Makr यूआई के पूरे प्रभाव को प्राप्त करने ? – Marvzz

मैंने आपको शुरुआत करने के लिए कुछ अच्छा दिया। जब आप किसी आइटम पर क्लिक करते हैं, तो उस आइटम को ऑफसेट पर ऑफ़लाइन करें जो jQuery एनिमेट के साथ ऑफसेट पर स्क्रॉल करता है। – Mathieu

हाँ, मैंने उन्हें प्राप्त किया, मैं उन्हें स्क्रॉल करने में सक्षम था, लेकिन मुझे स्लाइडडाउन की एनीमेशन के अगले भाग में परेशानी हो रही है। मैं उन्हें मकर के तरीके से काफी समय तक हासिल नहीं कर सकता। – Marvzz

192

आप jQuery के साथ पृष्ठ के स्क्रॉलटॉप को एनिमेट कर सकते हैं। http://papermashup.com/jquery-page-scrolling/

स्रोत

2011-11-08 08:09:51 Mathieu

मुझे केवल '# (" body ") का उपयोग करने की आवश्यकता है। एनिमेट (...); 'और यह फ़ायरफ़ॉक्स के लिए काम करता है , क्रोम, यानी। क्या 'html' DOM ऑब्जेक्ट को एनीमेशन को जोड़ने के लिए कोई विशिष्ट मामला है? – Daniel

'$ ("। Middle") ऑफसेट()। Top'-part उस ऑब्जेक्ट (क्लास, आईडी, ...) का ऑफसेट प्राप्त करना है, इसलिए पृष्ठ जानता है कि किस स्तर पर स्क्रॉल करना है। यदि आप पृष्ठ पर आधा रास्ते स्थित एक निश्चित div पर स्क्रॉल करना चाहते हैं, तो यह उपयोगी हो सकता है। – Mathieu

+14

'$ ('एचटीएमएल, बॉडी')' यानी 8 संगतता के लिए है। –

इस के लिए एक jQuery प्लगइन है:

$('html, body').animate({ 
    scrollTop: $(".middle").offset().top 
}, 2000);

यह साइट देखें। यह दस्तावेज को एक विशिष्ट तत्व पर स्क्रॉल करता है, ताकि यह व्यूपोर्ट के बीच में पूरी तरह से होगा। यह एनीमेशन easings का भी समर्थन करता है ताकि स्क्रॉल प्रभाव सुपर चिकनी लगेगा। AnimatedScroll.js देखें।

स्रोत

2013-08-12 21:32:03

के लिए भी है, मैं इस तरह की प्लगइन का उपयोग करने से बचूंगा, जब वास्तविक उत्तर मूल रूप से समर्थित है। '$ ('html, body')। एनिमेट ({scrollTop: x}, t);' बहुत सही है, आपके पृष्ठ के नेटवर्क टैब पर अनावश्यक प्लगइन जोड़ने की आवश्यकता नहीं है। – ChaseMoskal

आप बिल्कुल सही हैं, सिवाय इसके कि यह प्लगइन किसी भी दस्तावेज़ तत्व पर स्क्रॉल करने में सक्षम है, ताकि यह विंडो व्यूपोर्ट के बीच में बिल्कुल सही हो। –

समस्या यह है कि यह अभी भी किसी भी प्लगइन के बिना वास्तव में आसान है। यह सिर्फ '($ e.offset() शीर्ष + ($ e.height()/2) तक स्क्रॉल करने का मामला है - ($ (विंडो) .height()/2)', या अंग्रेज़ी में, 'elementCenter माइनस आधा व्यूपोर्ट हाइट "'। सही? – ChaseMoskal

आप मेरे द्वारा विकसित एक साधारण jquery प्लगइन (AnimateScroll) भी कोशिश कर सकते हैं जिसकी बहुत सराहना की गई थी!

स्रोत

2013-09-06 05:06:38

बहुत बढ़िया प्लगइन - इसका उपयोग करने के लिए इंतजार नहीं कर सकता! –

मैं बस का उपयोग करें:

$('body').animate({ 'scrollTop': '-=-'+<yourValueScroll>+'px' }, 2000);

स्रोत

2015-08-19 17:00:05

क्या आप समझा सकते हैं कि आप '- = -' के साथ क्या करने का प्रयास कर रहे हैं?क्या आप नंबर या कुछ टाइपकास्ट करने की कोशिश कर रहे हैं? – user151496

@ user151496 jQuery के ड्यूमेटेशन http://api.jquery.com/animate/ पर हस्ताक्षर करें जो वर्तमान में शुरू होता है "एनिमेटेड गुण भी रिश्तेदार हो सकते हैं।" जेएस में बस आप मौजूदा मायने में दस जोड़ने के लिए 'myVar + = 10' कह सकते हैं, यह स्निपेट मूल रूप से समान लक्ष्य को प्रभावित करने के लिए jQuery की कस्टम पार्सिंग का उपयोग कर रहा है:' scrollTop - = -yourScrollValue'। मैं निश्चित रूप से यह नहीं कह सकता कि क्यों ओपी ने इसे सरल '{scrollTop:' + = '+ value}' पर चुना है। – natevw

@ user151496 पहला '-' कम मूल्य है और दूसरा '-' यदि मूल्य को नकारात्मक मानता है तो वे सकारात्मक और विपरीत हो जाते हैं। :) –

jQuery एनिमेट स्क्रॉल

उत्तर

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