वर्तमान वेब पेज स्क्रॉल स्थिति कैसे प्राप्त करें और सेट करें?

121

मैं वर्तमान वेब पेज स्क्रॉल स्थिति कैसे प्राप्त कर सकता / सकती हूं?

मेरे पास एक लंबा फ़ॉर्म है जिसे उपयोगकर्ता की कार्रवाइयों / इनपुट के आधार पर ताज़ा किया जाना चाहिए। जब ऐसा होता है, तो पृष्ठ बहुत ऊपर तक पहुंच जाता है, जो उपयोगकर्ताओं को परेशान कर रहा है, क्योंकि उन्हें उस बिंदु पर वापस स्क्रॉल करना होगा जो वे थे।

यदि मैं पृष्ठ स्क्रॉल करने से पहले वर्तमान स्क्रॉल स्थिति (एक छिपे हुए इनपुट में) को कैप्चर कर सकता हूं, तो मैं इसे फिर से लोड करने के बाद वापस सेट कर सकता हूं।

javascript html

— xyz
स्रोत

AJAX से चलने वाला फॉर्म उन प्रभावों को रोकने के लिए बेहतर तरीका नहीं है (और यदि XHR अनुपलब्ध है, तो निश्चित रूप से एक कमबैक प्रदान करता है)? पृष्ठ पुनः लोड करने के लिए पृष्ठ पर ऊपर और पीछे फिर से कूदना होगा, एक विचित्रता जो कष्टप्रद हो सकती है।

— मार्सेल कोर्पेल

118

तुम document.documentElement.scrollTopसंपत्ति खोज रहे हो ।

— SLaks
स्रोत

धन्यवाद, मुझे यह मिला: articles.sitepoint.com/article/javascript-from-scratch/6 और getScrollingPosition()छिपे हुए चर में मूल्यों को संग्रहीत करने के लिए संशोधित । फिर रीफ्रेश किए गए पृष्ठ के html में, मैं उपयोग करता हूं <body onLoad="window.scrollTo(x,y), जहां x और y छिपे हुए मूल्यों से हैं!

— xyz

46

मुझे लगता है कि कम से कम, Ubuntu पर क्रोम पर, मैं document.documentElement.scrollTopहमेशा 0 लौटा रहा हूं document.body.scrollTop। उबंटू में एक फ़ायरफ़ॉक्स, दूसरी तरफ, रिवर्स सच है - आपको 0 मिलता है bodyऔर साथ में सही राशि documentElement। किसी भी विचार क्या देता है?

— '

12

यह उत्तर सटीक नहीं है क्योंकि scrollTopसंपत्ति सभी ब्राउज़रों पर काम नहीं करती है। बेहतर परिणाम के लिए जाँच करें window.pageXOffsetऔर window.pageYOffset।

— जियो

135

वर्तमान में स्वीकृत उत्तर गलत है - document.documentElement.scrollTopहमेशा Chrome पर 0 देता है। इसका कारण यह है कि WebKit bodyस्क्रॉलिंग का ट्रैक रखने के लिए उपयोग करता है , जबकि फ़ायरफ़ॉक्स और IE उपयोग करते हैं html।

वर्तमान स्थिति प्राप्त करने के लिए, आप चाहते हैं:

document.documentElement.scrollTop || document.body.scrollTop

आप पृष्ठ की तरह वर्तमान स्थिति को 1000px तक सेट कर सकते हैं:

document.documentElement.scrollTop = document.body.scrollTop = 1000;

या, jQuery का उपयोग करते हुए (आपके पास होने पर इसे चेतन करें!):

$("html, body").animate({ scrollTop: "1000px" });

— tobek
स्रोत

5

window.pageYOffsetयदि आप उपयोग कर रहे हैं window.scrollBy()या window.scrollTo()तरीके हैं तो gyo का उत्तर, सुझाव देना क्लीनर है ।

— igorsantos07

32

ब्राउज़र में वर्तमान विंडो स्क्रॉल निर्देशांक को कैसे उजागर किया जाता है, इसमें कुछ विसंगतियां हैं। Mac और iOS पर Google Chrome हमेशा उपयोग या jQuery के वापस आने पर लगता है ।0document.documentElement.scrollTop$(window).scrollTop()

हालाँकि, यह लगातार काम करता है:

// horizontal scrolling amount
window.pageXOffset

// vertical scrolling amount
window.pageYOffset

— Gyo
स्रोत

मैंने इसे भी नोटिस किया है, क्या यह मैक और आईओएस पर एक बग है?

— अलेक्जेंडर किम

@AlexanderKim मुझे लगता है कि यह संबंधित हो सकता है कि कैसे कुछ CSS नियमों (जैसे अतिप्रवाह) की व्याख्या की जाती है, और यह काम करने के लिए रिपोर्ट किया गया है यदि दोनों शरीर और HTML तत्वों पर स्क्रॉलटॉप की जाँच कर रहा है। हालांकि, परीक्षण और डिबगिंग से बचने के लिए, मैं हमेशा सुरक्षित और सुसंगत पेजएक्सऑफसेट / पेजयुफेसेट पर भरोसा करता हूं।

— गयो

1

सही उत्तर के लिए बहुत-बहुत धन्यवाद

— माइकल पचिनॉय

5

मैं एचटीएमएल 5 स्थानीय भंडारण समाधान के साथ गया था ... मेरे सभी लिंक एक फ़ंक्शन को कॉल करते हैं जो विंडो को बदलने से पहले इसे सेट करता है:

localStorage.topper = document.body.scrollTop;

और प्रत्येक पृष्ठ में शरीर के ओनलोड में है:

  if(localStorage.topper > 0){ 
    window.scrollTo(0,localStorage.topper);
  }

— AX लैब्स
स्रोत

3

स्थानीयस्टोरेज के सेट इट () और गेट इट () का उपयोग करने के लिए यह अधिक सुरुचिपूर्ण होगा और इसके बजाय प्रत्येक लिंक पर स्क्रॉल की स्थिति का बैक अप लें, पृष्ठ छोड़ते समय इसे एक बार स्टोर करें: window.addEventListener ("पहले से लोड करें",) (लोकलस्टोरेज)। setItem ("scrolly", document.documentElement.scrollTop || document.body.scTTop;});

— स्टेने