पृष्ठ के निचले भाग पर स्वचालित रूप से स्क्रॉल करें

Question

गौर कीजिए कि मेरे पास सवालों की एक सूची है। जब मैं पहले प्रश्न पर क्लिक करता हूं, तो यह मुझे स्वचालित रूप से पृष्ठ के निचले भाग में ले जाना चाहिए।

वास्तव में, मुझे पता है कि यह jQuery का उपयोग करके किया जा सकता है।

तो, क्या आप मुझे कुछ दस्तावेज या कुछ लिंक प्रदान कर सकते हैं, जहां मुझे इस प्रश्न का उत्तर मिल सकता है?

संपादित करें: पृष्ठ के निचले भाग में किसी विशेष HTML तत्व को स्क्रॉल करने की आवश्यकता है

Comments

यहाँ :: stackoverflow.com/questions/4249353/…

— सुधीर बस्ताकोटी

Answer 1

jQuery आवश्यक नहीं है। Google खोज से मुझे प्राप्त हुए अधिकांश शीर्ष परिणामों ने मुझे यह उत्तर दिया:

window.scrollTo(0,document.body.scrollHeight);

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

window.scrollTo(0,document.querySelector(".scrollingContainer").scrollHeight);

आप इसे onclickअपने प्रश्न (यानी <div onclick="ScrollToBottom()" ...) की घटना से जोड़ सकते हैं ।

कुछ अतिरिक्त स्रोत जिन्हें आप देख सकते हैं:

• http://www.sourcetricks.com/2010/07/javascript-scroll-to-bottom-of-page.html
• http://www.alecjacobson.com/weblog/?p=753
• http://www.mediacollege.com/internet/javascript/page/scroll.html
• http://www.electrictoolbox.com/jquery-scroll-bottom/

Comments

मेरे लिए काम नहीं किया। मैंने ऐसा किया element.scrollTop = element.scrollHeight:।

— एस्माओ

4 मई, 2016: कृपया ध्यान दें कि "स्क्रॉलटेल" फ़ंक्शन प्रयोगात्मक है और सभी ब्राउज़रों में काम नहीं करता है।

— corgrath

स्क्रोल्टो ने मेरे ब्राउज़र पर काम नहीं किया, मैं stackoverflow.com/questions/8917921/… के नीचे इस लिंक पर आया था जो कि बहुत उपयोगी है क्योंकि मेरे द्वारा देखे गए ब्राउज़र में समाधान काम करते हैं।

— user3655574

एक अलग तत्व के लिए, यह समाधान काम कर रहा है: document.querySelector ("। scrollContainer")। scrollTo (0, document.querySelector ("। ScrollContainer")। स्क्रॉलहाइट)।

— mPrinC

नीचे की ओर स्क्रॉल करने के लिए html, बॉडी की ऊँचाई 100% करनी होगी

— ट्रेवर थॉम्पसन

Answer 2

यदि आप पूरे पृष्ठ को नीचे तक स्क्रॉल करना चाहते हैं:

var scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;

JSFiddle पर नमूना देखें

यदि आप किसी तत्व को नीचे तक स्क्रॉल करना चाहते हैं:

function gotoBottom(id){
   var element = document.getElementById(id);
   element.scrollTop = element.scrollHeight - element.clientHeight;
}

और यह है कि यह कैसे काम करता है:

रेफरी: scrollTop , scrollHeight , clientHeight

अद्यतन: क्रोम के नवीनतम संस्करण (61+) और फ़ायरफ़ॉक्स शरीर की स्क्रॉलिंग का समर्थन नहीं करते हैं, देखें: https://dev.opera.com/articles/fixing-the-scrolltop-bug/

Comments

समाधान क्रोम, फ़ायरफ़ॉक्स, सफारी और IE8 + के साथ काम करता है। अधिक विस्तार के लिए इस लिंक को देखें quirksmode.org/dom/w3c_cssom.html

— Tho

@luochenhuan, मैंने "डॉक्युमेंट.सॉल" के बजाय "document.scrollingElement" का उपयोग करके नमूना कोड निर्धारित किया है, ऊपर देखें

— डेविड एवसजनिविली

Answer 3

वेनिला जेएस कार्यान्वयन:

element.scrollIntoView(false);

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

Comments

jQuery $ ('# id') के साथ [0] .scrollIntoView (झूठा);

— alexoviedo999

फिलहाल यह फ़ायरफ़ॉक्स केवल हालांकि

— टिम-

अब क्रोम के नए संस्करणों में काम करता है, लेकिन कुछ अतिरिक्त विकल्प (जैसे चिकनी स्क्रॉलिंग) अभी तक लागू नहीं होते हैं।

— मैट ज़ुकोव्स्की

मैंने पृष्ठ के अंत में एक खाली div जोड़ा और उस div की आईडी का उपयोग किया। पूरी तरह से काम किया।

— निस्बा

इससे भी बेहतर:element.scrollIntoView({behavior: "smooth"});

— 18'18

Answer 4

आप इसका उपयोग एनीमेशन प्रारूप में पृष्ठ के नीचे जाने के लिए कर सकते हैं।

$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");

Answer 5

नीचे क्रॉस ब्राउज़र समाधान होना चाहिए। यह क्रोम, फ़ायरफ़ॉक्स, सफारी और IE11 पर परीक्षण किया गया है

window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);

window.scrollTo (0, document.body.scrollHeight); कम से कम फ़ायरफ़ॉक्स 37.0.2 के लिए फ़ायरफ़ॉक्स पर काम नहीं करता है

Comments

यह फ़ायरफ़ॉक्स 62.0.3 में काम करता है , लेकिन मुझे कोई सुराग नहीं मिला है जब उन्होंने यह तय किया है।

— zb226

Answer 6

कभी-कभी यह पृष्ठ स्क्रॉल टू बटोम (सामाजिक नेटवर्क में उदाहरण के लिए) तक फैल जाता है, नीचे स्क्रॉल करने के लिए अंत (पृष्ठ का अंतिम बटोम) मैं इस स्क्रिप्ट का उपयोग करता हूं:

var scrollInterval = setInterval(function() { 
    document.documentElement.scrollTop = document.documentElement.scrollHeight;
}, 50);

और यदि आप ब्राउज़र की जावास्क्रिप्ट कंसोल में हैं, तो स्क्रॉलिंग को रोकने में सक्षम होना उपयोगी हो सकता है, इसलिए जोड़ें:

var stopScroll = function() { clearInterval(scrollInterval); };

और फिर उपयोग करें stopScroll();।

यदि आपको विशेष तत्व पर स्क्रॉल करने की आवश्यकता है, तो उपयोग करें:

var element = document.querySelector(".element-selector");
element.scrollIntoView();

या विशिष्ट तत्व के लिए ऑटोस्कोपिंग के लिए सार्वभौमिक स्क्रिप्ट (या पेज स्क्रॉलिंग अंतराल को रोकें):

var notChangedStepsCount = 0;
var scrollInterval = setInterval(function() {
    var element = document.querySelector(".element-selector");
    if (element) { 
        // element found
        clearInterval(scrollInterval);
        element.scrollIntoView();
    } else if((document.documentElement.scrollTop + window.innerHeight) != document.documentElement.scrollHeight) { 
        // no element -> scrolling
        notChangedStepsCount = 0;
        document.documentElement.scrollTop = document.documentElement.scrollHeight;
    } else if (notChangedStepsCount > 20) { 
        // no more space to scroll
        clearInterval(scrollInterval);
    } else {
        // waiting for possible extension (autoload) of the page
        notChangedStepsCount++;
    }
}, 50);

Comments

चलो आकार = ($ ("div [वर्ग * = 'कार्ड-सम्मिलित']")) लंबाई; ($ ("div [वर्ग * = 'कार्ड-सम्मिलित']"))] [आकार -1] .scrollIntoView ();

— nobjta_9x_tq

Answer 7

आप इस फ़ंक्शन का उपयोग कर सकते हैं जहाँ भी आपको इसे कॉल करने की आवश्यकता हो:

function scroll_to(div){
   if (div.scrollTop < div.scrollHeight - div.clientHeight)
        div.scrollTop += 10; // move down

}

jquery.com: स्क्रोल्टो

Comments

मेरे लिए, document.getElementById('copyright').scrollTop += 10(नवीनतम क्रोम में) काम नहीं करता है ... शून्य रहता है ...

— काइल बेकर

Answer 8

आप एनीमेशन के साथ भी ऐसा कर सकते हैं, यह बहुत सरल है

$('html, body').animate({
   scrollTop: $('footer').offset().top
   //scrollTop: $('#your-id').offset().top
   //scrollTop: $('.your-class').offset().top
}, 'slow');

आशा है कि मदद करता है, धन्यवाद

Answer 9

नीचे की ओर स्क्रॉल करने के लिए एक लाइनर

window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" });

बस सेट अप करने के लिए स्क्रॉल करने के topलिए0

Answer 10

आप लिंक तत्व की idसंदर्भ विशेषता hrefके लिए कोई भी संलग्न कर सकते हैं :

<a href="#myLink" id="myLink">
    Click me
</a>

ऊपर के उदाहरण में जब उपयोगकर्ता Click meपृष्ठ के निचले भाग पर क्लिक करता है , तो नेविगेशन Click meखुद को नेविगेट करता है।

Comments

यह मेरे लिए नहीं था क्योंकि यह url को बदल देता है और फिर मेरा कोणीय ऐप कुछ और करने के लिए रीडायरेक्ट करता है!

— १२:०२ पर heman123

Answer 11

आप एक अच्छा जावास्क्रिप्ट प्लगइन कोमल एंकर की कोशिश कर सकते हैं ।

उदाहरण:

function SomeFunction() {
  // your code
  // Pass an id attribute to scroll to. The # is required
  Gentle_Anchors.Setup('#destination');
  // maybe some more code
}

संगतता का परीक्षण किया गया:

• मैक फ़ायरफ़ॉक्स, सफारी, ओपेरा
• विंडोज फ़ायरफ़ॉक्स, ओपेरा, सफारी, इंटरनेट एक्सप्लोरर 5.55+
• लिनक्स अप्रयुक्त है लेकिन कम से कम फ़ायरफ़ॉक्स के साथ ठीक होना चाहिए

Answer 12

देर पार्टी के लिए, लेकिन यहाँ कुछ सरल जावास्क्रिप्ट-केवल स्क्रॉल करने के लिए कोड है किसी भी तत्व को नीचे :

function scrollToBottom(e) {
  e.scrollTop = e.scrollHeight - e.getBoundingClientRect().height;
}

Answer 13

नीचे कोड में सेलेनियम उपयोग में स्क्रॉल के लिए:

नीचे की ओर नीचे तक, पृष्ठ की ऊंचाई तक स्क्रॉल करें। नीचे दिए गए जावास्क्रिप्ट कोड का उपयोग करें जो जावास्क्रिप्ट और प्रतिक्रिया दोनों में ठीक काम करेगा।

JavascriptExecutor jse = (JavascriptExecutor) driver; // (driver is your browser webdriver object) 
jse.executeScript("window.scrollBy(0,document.body.scrollHeight || document.documentElement.scrollHeight)", "");

Answer 14

इतने सारे उत्तर दस्तावेज़ की ऊंचाई की गणना करने की कोशिश कर रहे हैं। लेकिन यह मेरे लिए सही गणना नहीं कर रहा था। हालाँकि, इन दोनों ने काम किया:

jQuery

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

या सिर्फ जे.एस.

    window.scrollTo(0,9999);

Comments

LOL "काम" किया। क्या होगा यदि दस्तावेज़ की तुलना में लंबा है 9999?

— डैन डस्केल्सस्कू

@DanDascalescu 99999

— एंड्रयू

Answer 15

यहाँ मेरा समाधान है:

 //**** scroll to bottom if at bottom

 function scrollbottom() {
    if (typeof(scr1)!='undefined') clearTimeout(scr1)   
    var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
    var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
    if((scrollTop + window.innerHeight) >= scrollHeight-50) window.scrollTo(0,scrollHeight+50)
    scr1=setTimeout(function(){scrollbottom()},200) 
 }
 scr1=setTimeout(function(){scrollbottom()},200)

Comments

क्या ... वहाँ भी चल रहा है? देखभाल आप अपने समाधान की व्याख्या? कोड-केवल उत्तर हतोत्साहित किए जाते हैं।

— डैन डस्केल्सस्कू

Answer 16

यह नीचे तक स्क्रॉल की गारंटी देगा

हेड कोड

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script language="javascript" type="text/javascript">
function scrollToBottom() {
  $('#html, body').scrollTop($('#html, body')[0].scrollHeight);
}
</script>

शरीर का कोड

<a href="javascript:void(0);" onmouseover="scrollToBottom();" title="Scroll to Bottom">&#9660; Bottom &#9660;</a>

Answer 17

एक तस्वीर एक हजार शब्दों के बराबर होती है:

कुंजी है:

document.documentElement.scrollTo({
  left: 0,
  top: document.documentElement.scrollHeight - document.documentElement.clientHeight,
  behavior: 'smooth'
});

वह उपयोग कर रहा है document.documentElement, जो <html>तत्व है। यह सिर्फ का उपयोग कर की तरह है window, लेकिन यह यह इस तरह से करने के लिए बस अपने निजी पसंद है, क्योंकि यह पूरे पृष्ठ नहीं है, लेकिन एक कंटेनर, यह आप को बदल देंगे छोड़कर सिर्फ इस तरह काम करता है document.bodyऔर document.documentElementकरने के लिए document.querySelector("#container-id")।

उदाहरण:

let cLines = 0;

let timerID = setInterval(function() {
  let elSomeContent = document.createElement("div");

  if (++cLines > 33) {
    clearInterval(timerID);
    elSomeContent.innerText = "That's all folks!";
  } else {
    elSomeContent.innerText = new Date().toLocaleDateString("en", {
      dateStyle: "long",
      timeStyle: "medium"
    });
  }
  document.body.appendChild(elSomeContent);

  document.documentElement.scrollTo({
    left: 0,
    top: document.documentElement.scrollHeight - document.documentElement.clientHeight,
    behavior: 'smooth'
  });

}, 1000);

body {
  font: 27px Arial, sans-serif;
  background: #ffc;
  color: #333;
}

यदि कोई नहीं है तो आप अंतर की तुलना कर सकते हैं scrollTo():

let cLines = 0;

let timerID = setInterval(function() {
  let elSomeContent = document.createElement("div");

  if (++cLines > 33) {
    clearInterval(timerID);
    elSomeContent.innerText = "That's all folks!";
  } else {
    elSomeContent.innerText = new Date().toLocaleDateString("en", {
      dateStyle: "long",
      timeStyle: "medium"
    });
  }
  document.body.appendChild(elSomeContent);

}, 1000);

body {
  font: 27px Arial, sans-serif;
  background: #ffc;
  color: #333;
}

Answer 18

एक आसान तरीका यदि आप विशिष्ट तत्व को नीचे स्क्रॉल करना चाहते हैं

जब भी आप स्क्रॉल करना चाहें, तो इस फ़ंक्शन को कॉल करें।

function scrollDown() {
 document.getElementById('scroll').scrollTop =  document.getElementById('scroll').scrollHeight
}

ul{
 height: 100px;
 width: 200px;
 overflow-y: scroll;
 border: 1px solid #000;
}

<ul id='scroll'>
<li>Top Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Bottom Here</li>
<li style="color: red">Bottom Here</li>
</ul>

<br />

<button onclick='scrollDown()'>Scroll Down</button>

Comments

यह सरल नहीं है , और एक scrollतत्व बनाने की आवश्यकता है ।

— डैन डस्केल्सस्कू

@DanDascalescu तुम सही हो! लेकिन मेरा कोड काम करता है मुझे नहीं लगता कि यह वोट का हकदार है

— श्रोय

"वर्क्स" पर्याप्त नहीं है। इस पृष्ठ पर सभी समाधान कुछ हद तक "काम" करते हैं। और उनमें से एक टन है। एक पाठक को कैसे निर्णय लेना चाहिए?

— डैन डेस्केल्सस्क्यू

Answer 19

मेरे पास गतिशील सामग्री के साथ एक कोणीय एप्लिकेशन है और मैंने उपरोक्त उत्तर के कई प्रयासों को बहुत अधिक सफलता के साथ नहीं दिया। मैंने @ कोनार्ड के उत्तर को अनुकूलित किया और इसे अपने परिदृश्य के लिए सादे जेएस में काम करने लगा:

एचटीएमएल

<div id="app">
    <button onClick="scrollToBottom()">Scroll to Bottom</button>
    <div class="row">
        <div class="col-md-4">
            <br>
            <h4>Details for Customer 1</h4>
            <hr>
            <!-- sequence Id -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="ID">
            </div>
            <!-- name -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Name">
            </div>
            <!-- description -->
            <div class="form-group">
                <textarea type="text" style="min-height: 100px" placeholder="Description" ></textarea>
            </div>
            <!-- address -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Address">
            </div>
            <!-- postcode -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Postcode">
            </div>
            <!-- Image -->
            <div class="form-group">
                <img style="width: 100%; height: 300px;">
                <div class="custom-file mt-3">
                    <label class="custom-file-label">{{'Choose file...'}}</label>
                </div>
            </div>
            <!-- Delete button -->
            <div class="form-group">
                <hr>
                <div class="row">
                    <div class="col">
                        <button class="btn btn-success btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to save">Save</button>
                        <button class="btn btn-success btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to update">Update</button>
                    </div>
                    <div class="col">
                        <button class="btn btn-danger btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to remove">Remove</button>
                    </div>
                </div>
                <hr>
            </div>
        </div>
    </div>
</div>

सीएसएस

body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
}

#app {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    transition: all 0.2s;
}

जे एस

function scrollToBottom() {
    scrollInterval;
    stopScroll;

    var scrollInterval = setInterval(function () {
        document.documentElement.scrollTop = document.documentElement.scrollHeight;
    }, 50);

    var stopScroll = setInterval(function () {
        clearInterval(scrollInterval);
    }, 100);
}

नवीनतम Chrome, FF, Edge और स्टॉक Android ब्राउज़र पर परीक्षण किया गया। यहाँ एक बेला है:

https://jsfiddle.net/cbruen1/18cta9gd/16/

Answer 20

getDocHeight: function() {
  var D = document;
  return Math.max(
    D.body.scrollHeight,
    D.documentElement.scrollHeight,
    D.body.offsetHeight,
    D.documentElement.offsetHeight,
    D.body.clientHeight,
    D.documentElement.clientHeight
  );
}

document.body.scrollTop = document.documentElement.scrollTop = this.getDocHeight();

Answer 21

window.scrollTo (0,1e10);

हमेशा काम करता है।

1e10 एक बड़ी संख्या है। तो इसके पृष्ठ का हमेशा अंत होता है।

Answer 22

अगर कोई भी कोणीय खोज रहा है

आपको बस अपने div पर इसे नीचे स्क्रॉल करने की आवश्यकता है

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

   <div class="my-list" #scrollMe [scrollTop]="scrollMe.scrollHeight">
   </div>