পৃষ্ঠার নীচে স্বয়ংক্রিয়ভাবে স্ক্রোল করুন


415

আমি প্রশ্নের একটি তালিকা আছে বিবেচনা করুন। আমি যখন প্রথম প্রশ্নটিতে ক্লিক করি তখন তা আমাকে স্বয়ংক্রিয়ভাবে পৃষ্ঠার নীচে নিয়ে যায়।

প্রকৃতপক্ষে, আমি জানি যে এটি jQuery ব্যবহার করে করা যেতে পারে।

সুতরাং, আপনি কি আমাকে কিছু ডকুমেন্টেশন বা এমন লিঙ্ক সরবরাহ করতে পারেন যেখানে আমি এই প্রশ্নের উত্তর পেতে পারি?

সম্পাদনা: পৃষ্ঠার নীচে একটি নির্দিষ্ট এইচটিএমএল উপাদান স্ক্রোল করা প্রয়োজন


উত্তর:


807

jQuery প্রয়োজনীয় নয়। গুগল অনুসন্ধান থেকে প্রাপ্ত বেশিরভাগ শীর্ষ ফলাফল আমাকে এই উত্তর দিয়েছে:

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

যেখানে আপনার নেস্টেড উপাদান রয়েছে, দস্তাবেজটি স্ক্রল নাও করতে পারে। এই ক্ষেত্রে, আপনাকে যে উপাদানটি স্ক্রোল করে সেটিকে লক্ষ্য করতে হবে এবং এর পরিবর্তে এর স্ক্রোল উচ্চতা ব্যবহার করতে হবে।

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

onclickআপনার প্রশ্নের ইভেন্টে (যেমন <div onclick="ScrollToBottom()" ...) এটি টাই করতে পারেন ।

কিছু অতিরিক্ত উত্স আপনি একবার দেখে নিতে পারেন:


29
আমার পক্ষে কাজ করেনি। আমি এই যা করেছে: element.scrollTop = element.scrollHeight
এসমো

7
4 মে, 2016: দয়া করে নোট করুন যে "স্ক্রোলটো" ফাংশনটি পরীক্ষামূলক এবং সমস্ত ব্রাউজারে কাজ করে না।
gra:৩১

1
scrollto আমার ব্রাউজারে কাজ না করে, আমি নীচে এই লিঙ্কে জুড়ে এসেছিল stackoverflow.com/questions/8917921/... যা খুবই দরকারী কারণ সমাধান ব্রাউজার আমি চেষ্টা জুড়ে কাজ।
ব্যবহারকারী3655574

একটি পৃথক উপাদানের জন্য, এটি সমাধান করছে: ডকুমেন্ট.কোয়ারিসিলিটার ("। স্ক্রোলিংকন্টেইনার")। স্ক্রোলটিও (0, ডকুমেন্ট.কোয়ারিসিলিটর ("। স্ক্রোলিংকন্টেইনার")। স্ক্রোলহাইট);
mPrinC

নীচে স্ক্রোল করতে এইচটিএমএল, শরীরের উচ্চতা 100% এ সেট করতে হতে পারে
ট্র্যাভার থম্পসন

106

আপনি যদি পুরো পৃষ্ঠাটি নীচে স্ক্রোল করতে চান:

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;
}

এবং এটি কিভাবে এটি কাজ করে:

এখানে চিত্র বর্ণনা লিখুন

রেফারেন্স: স্ক্রোলটপ , স্ক্রোলহাইট , ক্লায়েন্টহাইট

আপডেট: Chrome এর সর্বশেষ সংস্করণ (61১+) এবং ফায়ারফক্স শরীরের স্ক্রোলিং সমর্থন করে না, দেখুন: https://dev.opera.com/articles/fixing-the-scrolltop-bug/


সমাধানটি ক্রোম, ফায়ারফক্স, সাফারি এবং আই 8 + এর সাথে কাজ করে। আরও তথ্যের জন্য এই লিঙ্কটি দেখুন quirksmode.org/dom/w3c_cssom.html
থো

1
@ লুচেনহুয়ান, আমি স্রেফ "ডকুমেন্ট.বস" এর পরিবর্তে "ডকুমেন্ট.সক্র্লিংএলমেন্ট" ব্যবহার করে স্যাম্পল কোডটি ঠিক করেছি, উপরে দেখুন
ডেভিড অবসজনিশভিলি

58

ভ্যানিলা জেএস বাস্তবায়ন:

element.scrollIntoView(false);

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


3
jQuery with ('# আইডি') সহ [0]। স্ক্রোলইন্টোভিউ (মিথ্যা);
alexoviedo999

4
এই মুহূর্তে এটি ফায়ারফক্স যদিও
-আমরা

Chrome এর নতুন সংস্করণগুলিতে এখন কাজ করে তবে কিছু অতিরিক্ত বিকল্প (মসৃণ স্ক্রোলিংয়ের মতো) এখনও কার্যকর হয়েছে বলে মনে হয় না।
ম্যাট জুকোভস্কি

আমি পৃষ্ঠার শেষে একটি খালি ডিভ যুক্ত করেছি এবং সেই ডিভের আইডি ব্যবহার করেছি। নিখুঁতভাবে কাজ করেছেন।
নিসবা

5
আরও ভাল:element.scrollIntoView({behavior: "smooth"});
ব্ল্যানড

26

অ্যানিমেশন বিন্যাসে পৃষ্ঠাটি নীচে যেতে আপনি এটি ব্যবহার করতে পারেন।

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

23

নীচে ক্রস ব্রাউজার সমাধান হওয়া উচিত। এটি ক্রোম, ফায়ারফক্স, সাফারি এবং আই 11 এ পরীক্ষা করা হয়েছে

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

window.scrollTo (0, document.body.scrollHeight); ফায়ারফক্সে কমপক্ষে ফায়ারফক্স ৩.0.০.২ এর জন্য কাজ করে না


1
এটি ফায়ারফক্স 62২.০.৩ এ কাজ করে , তবে তারা যখন এটি স্থির করে তখন আমার কোনও ধারণা পাওয়া যায়নি।
zb226

12

কখনও কখনও পৃষ্ঠাটি স্ক্রোলে বাটুম পর্যন্ত প্রসারিত হয় (উদাহরণস্বরূপ সামাজিক নেটওয়ার্কগুলিতে), নীচে স্ক্রোল করতে (পৃষ্ঠার চূড়ান্ত বোতাম) আমি এই স্ক্রিপ্টটি ব্যবহার করি:

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);

আকার = ($ ("ডিভ [শ্রেণি * = 'কার্ড inোকানো']")) দৈর্ঘ্য; (div ("ডিভ [শ্রেনী * = 'কার্ড-সন্নিবেশিত']")) [আকার -১] .স্ক্রোলইন্টো ভিউ ();
nobjta_9x_tq

11

আপনি যেখানে এই কল করতে হবে সেখানে এই ফাংশনটি ব্যবহার করতে পারেন:

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

}

jquery.com: স্ক্রোলটো


আমার জন্য, document.getElementById('copyright').scrollTop += 10কাজ করে না (সর্বশেষ ক্রোমে) ... শূন্য থেকে যায় ...
কাইল বেকার

10

আপনি এটি খুব সহজ অ্যানিমেশন দিয়ে করতে পারেন

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

আশা সাহায্য করে, আপনাকে ধন্যবাদ


7

নীচে স্ক্রোল মসৃণ করতে একটি লাইনার

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

সহজে স্ক্রোল আপ topকরতে0


4

আপনি লিঙ্ক উপাদানটির idরেফারেন্স বৈশিষ্ট্যে যে কোনও সংযুক্ত করতে পারেন href:

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

উপরের উদাহরণে যখন ব্যবহারকারী Click meপৃষ্ঠার নীচে ক্লিক করেন, নেভিগেশন Click meনিজেই নেভিগেট করে।


এটি আমার পক্ষে হয়নি কারণ এটি ইউআরএল পরিবর্তন করে এবং তারপরে আমার কৌনিক অ্যাপটি অন্য কোনও কিছুর সাথে পুনঃনির্দেশ করে!
heman123

3

আপনি জেন্টল অ্যাঙ্কারস একটি দুর্দান্ত জাভাস্ক্রিপ্ট প্লাগইন চেষ্টা করতে পারেন ।

উদাহরণ:

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

সামঞ্জস্যতা পরীক্ষিত:

  • ম্যাক ফায়ারফক্স, সাফারি, অপেরা
  • উইন্ডোজ ফায়ারফক্স, অপেরা, সাফারি, ইন্টারনেট এক্সপ্লোরার 5.55+
  • লিনাক্স অপরিবর্তিত তবে কমপক্ষে ফায়ারফক্সের সাথে ঠিক থাকতে হবে

3

পার্টিতে দেরীতে, তবে নীচে যে কোনও উপাদান স্ক্রোল করার জন্য এখানে কয়েকটি সাধারণ জাভাস্ক্রিপ্ট-কেবল কোডটি রয়েছে :

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

3

সেলেনিয়ামে স্ক্রোল ডাউন কোডের জন্য ব্যবহার করুন:

নীচের ড্রপ ডাউন পর্যন্ত, পৃষ্ঠার উচ্চতা পর্যন্ত স্ক্রোল করুন। নীচের জাভাস্ক্রিপ্ট কোডটি ব্যবহার করুন যা জাভাস্ক্রিপ্ট এবং প্রতিক্রিয়া উভয় ক্ষেত্রে সূক্ষ্মভাবে কাজ করবে।

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

3

ডকুমেন্টের উচ্চতা গণনা করার চেষ্টা করে অনেক উত্তর। তবে এটি আমার পক্ষে সঠিকভাবে গণনা করা হয়নি। তবে এই দু'জনেই কাজ করেছেন:

jQuery

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

বা শুধু জেএস

    window.scrollTo(0,9999);

LOL "কাজ"। ডকুমেন্টের চেয়ে বেশি হলে কী হবে 9999?
ড্যান ড্যাসক্লেস্কু

1
@ ড্যানডাসকলেস্কু 99999
অ্যান্ড্রু

2

এখানে আমার সমাধান:

 //**** 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)

কি ... এমনকি সেখানে কি চলছে? আপনি কি নিজের সমাধান ব্যাখ্যা করবেন? কোড-কেবল উত্তরগুলি নিরুৎসাহিত করা হয়।
ড্যান ড্যাসক্লেস্কু

0

এটি নিশ্চিতভাবে নীচে স্ক্রোল করবে

প্রধান কোড

<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>

0

একটি ছবি হাজার শব্দের সমান:

মূলটি হ'ল:

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():


0

একটি নির্দিষ্ট উপায় যদি আপনি নির্দিষ্ট উপাদানটি স্ক্রোল করতে চান

আপনি যখনই নীচে স্ক্রোল করতে চান তখন এই ফাংশনটি কল করুন।

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>


এটি সহজ নয় এবং এর জন্য একটি scrollউপাদান তৈরি করা প্রয়োজন ।
ড্যান ড্যাসক্লেস্কু

@ ড্যানডাসকলেস্কু আপনি ঠিক বলেছেন! তবে আমার কোডটি কাজ করে বলে আমি মনে করি না যে এটি ভোটের যোগ্য বলে মনে হয়
শ্রোয়

"ওয়ার্কস" যথেষ্ট নয়। এই পৃষ্ঠার সমস্ত সমাধান কিছুটা "কাজ" করে। এবং তাদের একটি টন আছে। পাঠকের কীভাবে সিদ্ধান্ত নেওয়া উচিত?
ড্যান ড্যাসক্লেস্কু

0

গতিশীল সামগ্রী সহ আমার একটি কৌণিক অ্যাপ রয়েছে এবং আমি খুব বেশি সাফল্য না দিয়ে উপরের বেশ কয়েকটি উত্তর চেষ্টা করেছি। আমি @ কোনার্ডের উত্তরটি মানিয়ে নিয়েছি এবং আমার দৃশ্যের জন্য এটি সরল জেএসে কাজ করতে পেরেছি:

এইচটিএমএল

<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);
}

সর্বশেষতম ক্রোম, এফএফ, এজ এবং স্টোর অ্যান্ড্রয়েড ব্রাউজারে পরীক্ষিত। এখানে একটি বেহালতা:

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


-1
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();


-1

যদি কেউ কৌণিকের জন্য অনুসন্ধান করে

আপনার খালি স্ক্রোল করতে হবে এটি আপনার ডিভের সাথে যুক্ত করুন

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

   <div class="my-list" #scrollMe [scrollTop]="scrollMe.scrollHeight">
   </div>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.