जावास्क्रिप्ट DIV को लंबे पृष्ठ स्क्रॉल करने के लिए

Question

मेरे पास एक लंबे HTML पृष्ठ पर एक लिंक है। जब मैं इसे क्लिक करता हूं, तो मैं divविंडो में दृश्य में स्क्रॉल करके पृष्ठ के दूसरे भाग पर दिखाई देना चाहता हूं ।

EnsureVisibleदूसरी भाषाओं की तरह थोड़ा सा ।

मैं बाहर देख लिया है scrollTopऔर scrollToलेकिन वे लाल herrings की तरह लग रहे हैं।

क्या कोई मदद कर सकता है?

Answer 1

पुराना सवाल है, लेकिन अगर किसी को यह Google के माध्यम से मिल जाए (जैसा मैंने किया) और जो एंकर या jquery का उपयोग नहीं करना चाहता; एक तत्व के लिए 'कूद' करने के लिए एक अंतर्निहित जावास्क्रिप्ट है;

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

और क्या बेहतर है; quirksmode पर महान संगतता-तालिकाओं के अनुसार, यह सभी प्रमुख ब्राउज़रों द्वारा समर्थित है !

Comments

कम से कम (कम से कम फ़ायरफ़ॉक्स पर) एक चिकनी स्क्रॉल नहीं है, लेकिन यह काम करता है, कोड की एक पंक्ति के साथ, कोई तृतीय-पक्ष सामान नहीं है। अच्छा लगा।

— मेट्रिक्सफ्रॉग

अंतर्निहित स्क्रॉल के साथ समस्या यह है कि जब आप एक लंबा पृष्ठ देखते हैं, तो उपयोगकर्ता पृष्ठ को स्क्रॉल करते समय खो सकता है। मैंने इस कार्यक्षमता का एक एनिमेटेड संस्करण लिखा है जो केवल आवश्यकता होने पर कंटेनर को स्क्रॉल करता है और एनीमेशन के साथ ऐसा करता है ताकि उपयोगकर्ता वास्तव में देख सकें कि क्या हुआ। यह बाद में एक पूर्ण फ़ंक्शन भी चला सकता है। यह के समान है scrollTo jQuery अपवाद के साथ प्लगइन आप स्क्रॉल पूर्वज प्रदान करने के लिए की जरूरत नहीं है कि। यह अपने आप दिखता है।

— रॉबर्ट कोरिटनिक

@ रॉबर्ट, जो शानदार लगता है। क्या आप एक लिंक प्रदान कर सकते हैं या शायद एक उत्तर प्रदान करें जिसमें कोड शामिल हो?

— कर्क वल्ल

इस की सादगी कमाल की है।

— मीनमाट

एनीमेशन या चिकनी स्क्रॉल की तलाश में लोगों के लिए:document.getElementById('#something').scrollIntoView({ behavior: 'smooth', block: 'center' });

— खलील लालेह

Answer 2

यदि आप एक अतिरिक्त एक्सटेंशन नहीं जोड़ना चाहते हैं तो निम्न कोड को jQuery के साथ काम करना चाहिए।

$('a[href=#target]').
    click(function(){
        var target = $('a[name=target]');
        if (target.length)
        {
            var top = target.offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
            return false;
        }
    });

Answer 3

JQuery स्क्रॉलटाउ के बारे में कैसे - यह नमूना कोड देखें

Comments

क्या JQuery की जावास्क्रिप्ट नहीं है या क्या हम स्क्रैच से सभी लाइब्रेरी लिखना चाहते हैं? इस प्रश्न के बारे में मेरा पढ़ना था कि किसी विशिष्ट विशेषता को कैसे लागू किया जाए, शायद वह तकनीकी विवरण जानना चाहता था, लेकिन आप यह नहीं जानते कि मैं इससे ज्यादा कुछ नहीं करता।

— जॉर्ज मौअर

@BjornTipling - अगर वह जावास्क्रिप्ट देखने के लिए यहाँ यह है चाहता था demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js

— नॉर्मन एच

Answer 4

<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

<A name='myAnchorALongWayDownThePage"></a>

कोई फैंसी स्क्रॉलिंग नहीं, लेकिन यह आपको वहां ले जाना चाहिए।

Comments

उसी चीज़ को पूरा करने के लिए जावास्क्रिप्ट के लिए पूछा गया प्रश्न।

— स्कॉट स्वेज़ी

पीटर Boughton के जवाब की जाँच करें stackoverflow.com/questions/66964 - div एक आईडी देने के बजाय नामित एंकर का उपयोग कर एक ही काम करता है, लेकिन काफी बेहतर अर्थ अर्थ नहीं है और कम मार्कअप की आवश्यकता है।

— निक नेम

जैसा कि स्कॉट ने नीचे बताया है: document.location.hash = "myAnchor";

— आरोन वॉटर्स

Answer 5

स्क्रॉल करने में कठिनाई यह है कि आपको डिव दिखाने के लिए न केवल पेज को स्क्रॉल करने की आवश्यकता हो सकती है, बल्कि आपको किसी भी स्तर पर स्क्रॉल करने योग्य डिव के अंदर स्क्रॉल करने की आवश्यकता हो सकती है।

स्क्रॉलटॉप संपत्ति किसी भी DOM तत्व पर उपलब्ध है, जिसमें दस्तावेज़ निकाय भी शामिल है। इसे सेट करके, आप नियंत्रित कर सकते हैं कि कोई चीज़ कितनी दूर स्क्रॉल की गई है। आप क्लाइंटहाइट और स्क्रॉलहाइट गुणों का उपयोग करके भी देख सकते हैं कि स्क्रॉलिंग की कितनी आवश्यकता है (स्क्रॉलिंग तब संभव है जब क्लाइंटहाइट (व्यूपोर्ट) स्क्रॉलहाइट (सामग्री की ऊंचाई) से कम हो।

आप ऑफसेटटॉप संपत्ति का उपयोग यह पता लगाने के लिए भी कर सकते हैं कि कंटेनर में कोई तत्व कहाँ स्थित है।

वास्तव में सामान्य उद्देश्य "स्क्रैच इन व्यू" रूटीन से स्क्रैच बनाने के लिए, आपको उस नोड पर शुरू करना होगा जिसे आप उजागर करना चाहते हैं, यह सुनिश्चित करें कि यह उसके माता-पिता के दृश्य भाग में है, फिर माता-पिता के लिए एक ही दोहराएं, आदि, सभी जब तक आप शीर्ष पर नहीं पहुंच जाते।

इसका एक चरण कुछ इस तरह दिखाई देगा (बिना कोड के, धार मामलों की जाँच नहीं):

function scrollIntoView(node) {
  var parent = node.parent;
  var parentCHeight = parent.clientHeight;
  var parentSHeight = parent.scrollHeight;
  if (parentSHeight > parentCHeight) {
    var nodeHeight = node.clientHeight;
    var nodeOffset = node.offsetTop;
    var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
    parent.scrollTop = scrollOffset;
  }
  if (parent.parent) {
    scrollIntoView(parent);
  }
}

Answer 6

आप Element.scrollIntoView()विधि का उपयोग कर सकते हैं जैसा कि ऊपर उल्लेख किया गया था। यदि आप इसे बिना किसी पैरामीटर के अंदर छोड़ते हैं, तो आपके पास तत्काल बदसूरत स्क्रॉल होगा । इसे रोकने के लिए आप इस पैरामीटर को जोड़ सकते हैं - behavior:"smooth"।

उदाहरण:

document.getElementById('scroll-here-plz').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});

बस एक वेबसाइट पर scroll-here-plzअपने divया तत्व के साथ बदलें । और अगर आप अपने तत्व को अपनी खिड़की के नीचे देखते हैं या स्थिति वह नहीं है जिसकी आपको उम्मीद थी, तो पैरामीटर के साथ खेलें block: ""। आप उपयोग कर सकते हैं block: "start", block: "end"या block: "center"।

याद रखें: हमेशा एक वस्तु {} के अंदर मापदंडों का उपयोग करें।

यदि आपको अभी भी समस्याएं हैं, तो https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView पर जाएं

इस विधि के लिए विस्तृत प्रलेखन है।

Answer 7

इसने मेरे लिए काम किया

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

Answer 8

उत्तर यहां पोस्ट किया गया - आपकी समस्या का एक ही समाधान।

संपादित करें: यदि आप एक चिकनी स्क्रॉल चाहते हैं, तो JQuery का उत्तर बहुत अच्छा है - मैंने पहले कार्रवाई में ऐसा नहीं देखा था।

Answer 9

नामांकित लंगर क्यों नहीं?

Comments

हे ... मैंने एक जावास्क्रिप्ट समाधान पोस्ट करना शुरू किया, और फिर तुम्हारा पढ़ा ... और खुद को थप्पड़ मार दिया। अच्छी नौकरी! :-)

— शोग

Answer 10

आपके लिए आवश्यक संपत्ति स्थान है। उदाहरण के लिए:

location.hash = 'top'; // नामित एंकर के लिए कूद जाएगा "शीर्ष

मुझे नहीं पता कि dojo या उस जैसे कुछ टूलकिट के उपयोग के बिना अच्छा स्क्रॉल एनीमेशन कैसे करना है, लेकिन अगर आपको इसे लंगर में कूदने की आवश्यकता है, तो location.hash को इसे करना चाहिए।

(एफएफ 3 और सफारी 3.1.2 पर परीक्षण किया गया)

Comments

महान सरल समाधान ... IE6 और IE8 (IE7 के साथ परीक्षण नहीं किया गया) के साथ भी काम करता है

— ckarras 19

यह अब तक का सबसे अच्छा जवाब है; यह सरल, विश्वसनीय है और इसके लिए किसी पुस्तकालय की आवश्यकता नहीं है। +1

Answer 11

मैं फ़ुटपाटा के उत्तर के ऊपर एक टिप्पणी नहीं जोड़ सकता, लेकिन एक चिकनी स्क्रॉल उपयोग के लिए:

onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"

Comments

क्रोम में सही काम करता है। धन्यवाद!

— अल बेल्डो

Answer 12

स्क्रॉलटॉप (IIRC) दस्तावेज़ में पृष्ठ के शीर्ष पर स्क्रॉल किया जाता है। स्क्रॉलटॉ पृष्ठ को स्क्रॉल करता है ताकि पृष्ठ का शीर्ष वह स्थान है जहां आप निर्दिष्ट करते हैं।

आपको यहाँ क्या ज़रूरत है कुछ जावास्क्रिप्ट शैली में हेरफेर किया गया है। यह कहें कि यदि आप डिव-स्क्रीन चाहते हैं और दाईं ओर से स्क्रॉल करें तो आप div की बाईं विशेषता को पृष्ठ की चौड़ाई पर सेट कर देंगे और फिर इसे हर कुछ सेकंड में एक निर्धारित राशि तक घटा सकते हैं जब तक कि आप यह नहीं चाहते।

यह आपको सही दिशा में इंगित करना चाहिए।

अतिरिक्त: मुझे क्षमा करें, मैंने सोचा था कि आप कहीं से 'पॉप आउट' करना चाहते थे (जैसे यह साइट कभी-कभी होती है), और पूरे पृष्ठ को एक खंड में नहीं ले जाना चाहिए। एंकरों का उचित उपयोग उस प्रभाव को प्राप्त करेगा।

Answer 13

डोम तत्व पर स्क्रॉल करने के सामान्य मामले के लिए एक jQuery प्लगइन है , लेकिन अगर प्रदर्शन एक मुद्दा है (और जब यह नहीं है?), तो मैं इसे मैन्युअल रूप से करने का सुझाव दूंगा। इसमें दो चरण शामिल हैं:

1. जिस तत्व को आप स्क्रॉल कर रहे हैं, उसकी स्थिति का पता लगाना।
2. उस स्थिति तक स्क्रॉल करना।

quirksmode पूर्व के पीछे तंत्र की एक अच्छी व्याख्या देता है। यहाँ मेरा पसंदीदा समाधान है:

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

यह शून्य से 0 तक कास्टिंग का उपयोग करता है, जो कुछ हलकों में उचित शिष्टाचार नहीं है, लेकिन मुझे यह पसंद है :) दूसरा भाग उपयोग करता है window.scroll। तो बाकी समाधान है:

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

देखा!

Comments

आप पहला पैरामीटर सेट करना भूल गए- window.scroll (0, निरपेक्षऑफसेट (एलएम));

— रिचर्ड

Answer 14

मैंने व्यक्तिगत रूप से जोश के jQuery- आधारित उत्तर को सबसे अच्छा पाया, जो मैंने देखा, और अपने आवेदन के लिए पूरी तरह से काम किया ... बिल्कुल, मैं पहले से ही jQuery का उपयोग कर रहा था ... मैंने निश्चित रूप से सिर्फ उसके लिए पूरे jQ पुस्तकालय को शामिल नहीं किया होगा। एक उद्देश्य।

चीयर्स!

संपादित करें: ठीक है ... यह पोस्ट करने के बाद महज कुछ सेकंड, मैंने खदान के ठीक नीचे एक और जवाब देखा (यह सुनिश्चित नहीं था कि अगर एक संपादन के बाद भी मेरे नीचे है) जो उपयोग करने के लिए कहा गया है:

document.getElementById ( 'your_element_ID_here') scrollIntoView ()।;

यह पूरी तरह से और jQuery संस्करण की तुलना में बहुत कम कोड में काम करता है! मुझे नहीं पता था कि JS में एक अंतर्निहित फ़ंक्शन था जिसे .scrollIntoView () कहा जाता है, लेकिन यह है! इसलिए, यदि आप फैंसी एनीमेशन चाहते हैं, तो jQuery पर जाएं। त्वरित n 'गंदा ... यह एक का उपयोग करें!

Answer 15

चिकनी स्क्रॉल के लिए यह कोड उपयोगी है

$('a[href*=#scrollToDivId]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      var head_height = $('.header').outerHeight(); // if page has any sticky header get the header height else use 0 here
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - head_height
        }, 1000);
        return false;
      }
    }
  });

Answer 16

अगर मैं गलत हूं तो मुझे सुधारो लेकिन मैं बार-बार सवाल पढ़ रहा हूं और अब भी सोचता हूं कि एंगस मैककॉटअप पूछ रहा था कि स्थिति को कैसे निर्धारित किया जाए: निश्चित।

एंगस मैककॉटअप, http://www.cssplay.co.uk/layouts/fixed.html देखें - यदि आप चाहते हैं कि आपका DIV एक मेनू की तरह व्यवहार करे, तो वहां एक CSS देखें