JQuery $ .scrollTo () फ़ंक्शन का उपयोग करके विंडो को कैसे स्क्रॉल करें

Question

मैं हर बार उपयोगकर्ता को दस्तावेज़ के शीर्ष के पास 100px नीचे स्क्रॉल करने की कोशिश कर रहा हूं।

मेरे पास फ़ंक्शन निष्पादित होता है जब उपयोगकर्ता दस्तावेज़ के शीर्ष के करीब हो जाता है, लेकिन .scrollTo फ़ंक्शन काम नहीं कर रहा है।

मैंने यह देखने के लिए पहले और बाद में अलर्ट लगाया कि क्या यह वास्तव में लाइन थी या नहीं जो इसे रोक रही थी और केवल पहला अलर्ट बंद हो गया, यहां कोड है:

alert("starting");
$.scrollTo({ top: '+=100px', left: '+=0px' }, 800);
alert("finished");

मुझे पता है कि मेरे पास jquery पृष्ठ ठीक से जुड़ा हुआ है क्योंकि मैं कई अन्य jquery फ़ंक्शन का उपयोग कर रहा हूं और वे सभी ठीक काम करते हैं। मैंने ऊपर से 'px' निकालने की भी कोशिश की है और इससे कोई फर्क नहीं पड़ता।

Comments

Jquery ही मेरी ठीक काम कर रही है, लेकिन क्या आप सुनिश्चित हैं कि आपके पास स्क्रॉलको प्लगइन ठीक से जुड़ा हुआ है? उन अलर्ट्स में से एक को अलर्ट में बदलें ($। scrollTo);

— एंड्रयू

Answer 1

यदि यह काम नहीं कर रहा है तो आप jQuery के स्क्रॉलटॉप विधि का उपयोग करने का प्रयास क्यों नहीं करते हैं?

$("#id").scrollTop($("#id").scrollTop() + 100);

यदि आप सुचारू रूप से स्क्रॉल करना चाहते हैं, तो आप मूल जावास्क्रिप्ट सेटटाइमआउट / सेटइंटरवल फ़ंक्शन का उपयोग कर सकते हैं ताकि यह निर्धारित समय से अधिक 1px की वृद्धि में स्क्रॉल कर सके।

Comments

ध्यान दें कि यदि आप पूरे पृष्ठ को स्क्रॉल करना चाहते हैं और अलग-अलग तत्व नहीं, तो टिम (जैसे 'html, बॉडी') का उपयोग करें जैसे कि यहां इंगित किया गया है। सिर्फ $ ('बॉडी') सभी ब्राउज़रों में काम नहीं करेगा।

— i

Answer 2

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

Comments

मैंने अक्सर सोचा है कि लोग सिर्फ 'html' के बजाय स्क्रॉलटॉप के लिए 'html, बॉडी' का उपयोग क्यों करते हैं। इस पर कोई विचार?

— स्कॉट ग्रीनफील्ड

+1 ने मेरे लिए काम किया;) मुझे यह जानने में भी दिलचस्पी है कि html, bodyसिर्फ html के बजाय क्यों ?

— काटो

@ScottGreenfield, @Kato: निश्चित रूप से क्यों नहीं, लेकिन यह टिप्पणी कहती है कि इसमें bodyक्रोम 4 पर ब्रेक शामिल नहीं है : stackoverflow.com/questions/1890995/…

— Yuji 'Tomita' Tomita

scrollTop: 0ठीक काम भी कर रहा है। लेकिन अवधि कम हो जाती है। ठीक काम करता है अगर गति में 1000 सेट

— shashwat

यह एक अच्छा समाधान है जब तक आप एक पूर्ण विधि नहीं जोड़ना चाहते हैं - यह दो बार निष्पादित करेगा। @complistic का समाधान अधिक सुरुचिपूर्ण है, और इससे बचाव होगा।

— 19 अगस्त को प्लेंग्गुई

Answer 3

jQuery अब एक स्क्रॉल चर के रूप में स्क्रॉलटॉप का समर्थन करता है।

$("#id").animate({"scrollTop": $("#id").scrollTop() + 100});

अब आपको सुचारू रूप से स्क्रॉल करने के लिए setTimeout / setInterval की आवश्यकता नहीं है।

Comments

कुछ सिंटैक्स त्रुटियां मिलीं - आपके समापन की याद आ रही है {। अन्यथा यह एक अच्छा बिंदु है।

— यहोशू

$("#id").offset().topइसके बजाय होना चाहिए ?

— 15

Answer 4

htmlबनाम bodyमुद्दे के आसपास जाने के लिए , मैंने सीधे सीएसएस को एनिमेट न करके इसे ठीक किया, बल्कि window.scrollTo();प्रत्येक चरण पर कॉल किया:

$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

यह किसी भी ताज़ा गोच के बिना अच्छी तरह से काम करता है क्योंकि यह क्रॉस-ब्राउज़र जावास्क्रिप्ट का उपयोग कर रहा है।

अधिक जानकारी के लिए http://james.padolsey.com/javascript/fun-with-jquerys-animate/ पर एक नज़र डालें जो आप jQuery के चेतन फ़ंक्शन के साथ कर सकते हैं।

Comments

ये जबरदस्त है। मैं केवल बदल window.pageYOffsetकरने के लिए $(window).scrollTop()और window.scrollTo(0, val)करने के लिए $(window).scrollTop(val)तो मैं ब्राउज़र संगतता के बारे में चिंता की जरूरत नहीं है।

— लेफ्टक्लबेन सेप

मैंने कभी भी इस तरह से jQuery के चेतन विधि के लिए एक वस्तु पारित करने के लिए नहीं सोचा था। इतने सारे संभव उपयोग। यह समाधान बहुत अच्छा है, धन्यवाद।

— Synexis

हां, तकनीक का महत्वपूर्ण योगदान है। पहले सीधे "window.scrollTo ()" का उपयोग करके ब्राउज़र मुद्दों के आसपास हो गया, लेकिन यह "पूर्ण" कॉल-बैक के लिए अनुमति नहीं देता है, न ही एक वादा। इस समाधान के लिए धन्यवाद @complistic। इसके अलावा, @leftclickben को मेरा धन्यवाद; मैंने ".scrollTop ()" का उपयोग करते हुए उनकी विविधता को लागू किया। इसके अलावा, "james.padolsey" लेख, प्रति लिंक, एक कविता है, बहुत सार्थक पढ़ा है।

— IAM_AL_X

मुझे लगता है कि "window.scrollTo ()" सभी आधुनिक ब्राउज़रों के साथ संगत होना चाहिए।

— IAM_AL_X

Answer 5

ऐसा लगता है कि आपने वाक्य रचना को थोड़ा गलत कर दिया है ... मैं आपके कोड के आधार पर मान रहा हूं कि आप 800ms में 100px नीचे स्क्रॉल करने की कोशिश कर रहे हैं, यदि ऐसा है तो यह काम करता है (स्क्रॉलट 1.4.1 का उपयोग करके):

$.scrollTo('+=100px', 800, { axis:'y' });

Answer 6

वास्तव में कुछ ऐसा है

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top +
 parseInt($("#"+prop).css('padding-top'),10) },'slow');
}

अच्छी तरह से काम करेंगे और पैडिंग का समर्थन करेंगे। आप नीचे दिए गए दृश्य को पूरा करने के लिए भी आसानी से मार्जिन का समर्थन कर सकते हैं

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top 
+ parseInt($("#"+prop).css('padding-top'),10) 
+ parseInt($("#"+prop).css('margin-top'),10) +},'slow');
}