स्क्रॉल करने योग्य div के शीर्ष पर वापस स्क्रॉल करें

121

<div id="containerDiv"></div>

#containerDiv {
  position: absolute;
  top: 0px;
  width: 400px;
  height: 100%;
  padding: 5px;
  font-size: .875em;
  overflow-y: scroll;
}

document.getElementById("containerDiv").innerHTML = variableLongText;

अगली बार कंटेनर div के शीर्ष पर वापस स्क्रॉल स्थिति कैसे रीसेट करें?

javascript html scroll

— मैं यहाँ हुं
स्रोत

206

var myDiv = document.getElementById('containerDiv');
myDiv.innerHTML = variableLongText;
myDiv.scrollTop = 0;

scrollTopविशेषता देखें ।

— Phrogz
स्रोत

कोशिश की लेकिन यह काम नहीं किया। जब एक वेरिएंट लॉन्गटेक्स्ट को कंटेनर डिव में लोड किया जाता है और उसके बीच में देख रहा होता है, तो नए वैरिएबल लॉन्गटेक्स्ट को स्वाइप करें, यह कंटेनर में दिखाई देगा, लेकिन हम इसके ऊपर नहीं देख पाएंगे, यह पहले से ही स्क्रॉल होगा थोड़ा नीचे।

— '20:01

2

@ s12345 आप अपनी समस्या (जैसे jsfiddle.net पर ) हमें दिखाते हुए एक प्रतिलिपि प्रस्तुत करने योग्य परीक्षण केस बना सकते हैं और कहेंगे कि आप इस पर ओएस / ब्राउज़र / संस्करण का क्या अनुभव कर रहे हैं।

— फ्रोग्ज़

2

सॉरी मेरी गलती .. यह काम करता है! दो समान विभाजनों के साथ भ्रमित हो गया।

— IMHere

63

एक चिकनी एनीमेशन के साथ ऐसा करने का एक और तरीका इस तरह है

$("#containerDiv").animate({ scrollTop: 0 }, "fast");

— महमूद इब्राहिम
स्रोत

7

अच्छी तरह से काम करता है, लेकिन कृपया उपयोग न करें slow, यह बहुत धीमा है ...!

— पास्कल

1

slowदूसरे तर्क के रूप में पारित करने के बजाय । आप एक पूर्णांक में पास कर सकते हैं जो एनीमेशन को पूरा करने के लिए मिलीसेकंड की संख्या होगी।

— सुशांत गुप्ता

2

इसे उपवास में बदल दिया :)

— महमूद इब्राहिम

1

सबसे बढ़िया उत्तर! धन्यवाद!

— योगपांडा

1

यह ठीक काम करता है यदि आप jquery का उपयोग कर रहे हैं। यदि आप कोणीय टाइपस्क्रिप्ट (सादा जावास्क्रिप्ट) का उपयोग कर रहे हैं तो यह काम नहीं करेगा। आप इसे सादे जावास्क्रिप्ट के साथ कैसे प्राप्त कर सकते हैं।

— बाबूलास

27

मैंने इस प्रश्न के मौजूदा उत्तर की कोशिश की, और उनमें से किसी ने भी मेरे लिए क्रोम पर काम नहीं किया। क्या काम किया थोड़ा अलग था:

$('body, html, #containerDiv').scrollTop(0);

— सनीसाइड प्रोडक्शंस
स्रोत

16

scrollTo

window.scrollTo(0, 0);

शीर्ष पर खिड़कियों को स्क्रॉल करने के लिए अंतिम समाधान है - सबसे अच्छी बात यह है कि इसके लिए किसी भी आईडी चयनकर्ता की आवश्यकता नहीं है और यहां तक कि अगर हम IFRAME संरचना का उपयोग करते हैं तो यह बहुत अच्छी तरह से काम करेगा।

स्क्रॉलटॉ () विधि दस्तावेज़ को निर्दिष्ट निर्देशांक तक स्क्रॉल करती है।
window.scrollTo (xpos, ypos);
xpos नंबर आवश्यक है। एक्स-धुरी (क्षैतिज) के साथ स्क्रॉल करने के लिए समन्वय, पिक्सेल
ypos संख्या में आवश्यक है। पिक्सेल में y- अक्ष (ऊर्ध्वाधर) के साथ स्क्रॉल करने के लिए समन्वय

jQuery

ऐसा करने के लिए एक और विकल्प jQuery का उपयोग कर रहा है और यह उसी के लिए एक चिकनी नज़र देगा

$('html,body').animate({scrollTop: 0}, 100);

जहां स्क्रॉलटॉप के बाद 0 पिक्सेल में ऊर्ध्वाधर स्क्रॉलबार स्थिति को निर्दिष्ट करता है और दूसरा पैरामीटर एक वैकल्पिक पैरामीटर है जो कार्य पूरा करने के लिए माइक्रोसेकंड में समय दिखाता है।

— गौरव तिवारी
स्रोत

1

क्या होगा अगर हम केवल शीर्ष पर एक आंतरिक div स्क्रॉल करना चाहते हैं? यह अंततः काम नहीं करेगा।

— जॉन लॉर्ड

1

तत्वों की भी .scrollTo विधि है, आप कर सकते हैंdocument.getElementById('scroller').scrollTo(0,0)

— Mojimi

15

यह मेरे लिए काम किया:

document.getElementById('yourDivID').scrollIntoView();

— रजत
स्रोत

यह मेरा पसंदीदा उपाय है। चिकनी संक्रमण के लिए, इसे जोड़ें:document.getElementById("yourDivID").scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"})

— क्रिस

इसके अलावा, ध्यान दें कि scollIntoViewकेवल तभी काम करता है जब आप इसे उस तत्व पर कहते हैं जिसे स्क्रॉल करना है। दूसरे शब्दों में, तत्व आप स्क्रॉल करना चाहते हैं पर यह कॉल नहीं करते के लिए , तत्व आप स्क्रॉल करना चाहते हैं पर यह कहते हैं।

— क्रिस

9

जो लोग अभी भी इस काम को नहीं कर सकते हैं, सुनिश्चित करें कि jQuery फ़ंक्शन का उपयोग करने से पहले अतिप्रवाहित तत्व प्रदर्शित किया गया है ।

उदाहरण के लिए:

$('#elem').show();
$('#elem').scrollTop(0);

— फ्रांकोइस नोएल
स्रोत

1

जीवन रक्षक! स्क्रॉल करने के लिए जीने की इच्छाशक्ति खोने लगी थी, काम नहीं कर रहा था! मेरे स्क्रॉलटॉप कॉल को सेटटाइमआउट फ़ंक्शन में रखना था।

— AVFC_Bubble88

मुझे भी ऐसा ही लगता है! मैं बूटस्ट्रैप मोडल डायलॉग बॉक्स में काम कर रहा था। मुझे उस मोडल के लिए एक इवेंट सेटअप करना था जो स्क्रॉलबार को रीसेट नहीं करता था जब तक कि मोडल ने एनिमेशन करना बंद नहीं कर दिया था। यह वह कोड है जिसका मैंने उपयोग किया: $ ('# add_modal')।

— इर्व लेन्र्ट

2

मेरे लिए स्क्रॉलटॉप तरीका काम नहीं करता था, लेकिन मैंने अन्य पाया:

element.style.display = 'none';
setTimeout(function() { element.style.display = 'block' }, 100);

विश्वसनीय सीएसएस प्रतिपादन के लिए न्यूनतम समय की जांच नहीं की, हालांकि, 100ms ओवरकिल हो सकते हैं।

— AlexTR
स्रोत

2

यदि आप एक चिकनी संक्रमण के साथ स्क्रॉल करना चाहते हैं, तो आप इसका उपयोग कर सकते हैं!

(वेनिला जेएस)

const tabScroll = document.getElementById("tabScroll");
window.scrollTo({
  'behavior': 'smooth',
  'left': 0,
  'top': tabScroll.offsetTop - 80
});

यदि आपके लक्षित उपयोगकर्ता क्रोम और फ़ायरफ़ॉक्स हैं , तो यह अच्छा है! लेकिन दुर्भाग्य से यह विधि सभी ब्राउज़रों पर पर्याप्त रूप से समर्थित नहीं है। यहा जांचिये

उम्मीद है की यह मदद करेगा!!

— अश्विन
स्रोत

2

फ्रेंकोइस नोएल के जवाब के अनुसार "उन लोगों के लिए जो अभी भी यह काम नहीं कर सकते हैं, सुनिश्चित करें कि ओवरफ्लो किया गया तत्व jQuery फ़ंक्शन का उपयोग करने से पहले प्रदर्शित किया जाता है।"

मैं एक बूटस्ट्रैप मोडल में काम कर रहा था जिसे मैं बार-बार एक डिव में खाता अनुमतियों के साथ लाता हूं जो y आयाम पर ओवरफ्लो करता है। मेरी समस्या यह थी, मैं jquery .scrollTop (0) फ़ंक्शन का उपयोग करने की कोशिश कर रहा था और इससे कोई फर्क नहीं पड़ेगा कि मैंने इसे कैसे करने की कोशिश की। मुझे उस मोडल के लिए एक इवेंट सेटअप करना था जो स्क्रॉलबार को रीसेट नहीं करता था जब तक कि मोडल ने एनिमेशन करना बंद नहीं कर दिया था। कोड है कि अंत में मेरे लिए काम किया है यहाँ है:

    $('#add-modal').on('shown.bs.modal', function (e) {
        $('div.border').scrollTop(0);
    });

— इर्व लेन्र्ट
स्रोत

1

यदि HTML सामग्री एकल व्यूपोर्ट को ओवरफ्लो करती है, तो यह मेरे लिए केवल जावास्क्रिप्ट का उपयोग करके काम करती है:

document.getElementsByTagName('body')[0].scrollTop = 0;

सादर,

— रूबेन
स्रोत

1

यह एकमात्र तरीका है जो मेरे लिए काम करता है, चिकनी स्क्रॉल संक्रमण के साथ:

  $('html, body').animate({
    scrollTop: $('#containerDiv').offset().top,
  }, 250);

— फ्रेड के
स्रोत

1

वर्ग नाम से तत्व प्राप्त करते समय, वापसी मूल्य को मत भूलना एक सरणी है; इसलिए यह कोड:

document.getElementByClassName("dropdown-menu").scrollTop = 0

काम नहीं करेगा। इसके बजाय नीचे दिए गए कोड का उपयोग करें।

document.getElementByClassName("dropdown-menu")[0].scrollTop = 0

मुझे लगा कि अन्य लोगों को भी इसी तरह की समस्या का सामना करना पड़ सकता है जैसा मैंने किया; तो यह चाल करना चाहिए।

— महसन नूरानी
स्रोत

0

ये दो कोड मेरे लिए एक आकर्षण की तरह काम करते थे, यह पहले पृष्ठ के शीर्ष पर स्क्रॉल करने के लिए ले जाएगा लेकिन अगर आप कुछ विशिष्ट div पर स्क्रॉल करना चाहते हैं तो अपनी div आईडी के साथ दूसरे का उपयोग करें।

$('body, html, #containerDiv').scrollTop(0);
document.getElementById('yourDivID').scrollIntoView();

यदि आप क्लास नाम से स्क्रॉल करना चाहते हैं तो नीचे दिए गए कोड का उपयोग करें

var $container = $("html,body");
var $scrollTo = $('.main-content');

$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},300);

— अमीर शाह
स्रोत

0

ID के पास उसी div की आईडी होनी चाहिए जिसमें ओवरफ्लो css प्रॉपर्टी हो।

document.querySelector('#YOUR_OVERFLOWED_DIV').scrollTop = 0;

— csandreas1
स्रोत