เลื่อนโดยอัตโนมัติไปที่ด้านล่างของหน้า

พิจารณาว่าฉันมีรายการคำถาม เมื่อฉันคลิกที่คำถามแรกมันจะพาฉันไปที่ด้านล่างของหน้าโดยอัตโนมัติ

ด้วยความจริงแล้วฉันรู้ว่าสิ่งนี้สามารถทำได้โดยใช้ jQuery

ดังนั้นคุณสามารถให้เอกสารกับฉันหรือบางลิงก์ที่ฉันสามารถหาคำตอบสำหรับคำถามนี้ได้หรือไม่?

แก้ไข: ต้องเลื่อนไปที่องค์ประกอบ HTML เฉพาะที่ด้านล่างของหน้า

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/

หากคุณต้องการเลื่อนทั้งหน้าไปด้านล่าง:

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

และนั่นคือวิธีการทำงาน:

Ref: scrollTop , scrollHeight , clientHeight

อัปเดต: Chrome เวอร์ชันล่าสุด (61+) และ Firefox ไม่รองรับการเลื่อนตัวโปรดดู: https://dev.opera.com/articles/fixing-the-scrolltop-bug/

การใช้ Vanilla JS:

element.scrollIntoView(false);

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

คุณสามารถใช้สิ่งนี้เพื่อเลื่อนหน้าลงในรูปแบบภาพเคลื่อนไหว

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

ด้านล่างควรเป็นโซลูชันข้ามเบราว์เซอร์ มันได้รับการทดสอบบน Chrome, Firefox, Safari และ IE11

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

window.scrollTo (0, document.body.scrollHeight); ไม่ทำงานบน Firefox อย่างน้อยสำหรับ Firefox 37.0.2

บางครั้งหน้าจะขยายเมื่อเลื่อนไปที่ buttom (เช่นในเครือข่ายสังคม) เพื่อเลื่อนลงไปยังจุดสิ้นสุด (buttom ขั้นสุดท้ายของหน้า) ฉันใช้สคริปต์นี้:

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

คุณสามารถใช้ฟังก์ชั่นนี้ได้ทุกที่ที่คุณต้องการเรียกว่า:

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

}

jquery.com: ScrollTo

คุณสามารถทำสิ่งนี้ได้ด้วยแอนิเมชันมันง่ายมาก

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

หวังว่าจะช่วยได้ขอบคุณ

หนึ่งซับเพื่อเลื่อนไปด้านล่างอย่างราบรื่น

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

เพื่อเลื่อนขึ้นตั้งค่าtopเป็น0

คุณสามารถแนบidแอตทริบิวต์การอ้างอิงhrefขององค์ประกอบลิงก์:

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

ในตัวอย่างด้านบนเมื่อผู้ใช้คลิกClick meที่ด้านล่างของหน้าการนำทางนำทางไปยังClick meตัวเอง

คุณอาจลองใช้ปลั๊กอินจาวาสคริปต์ที่อ่อนโยนของ Gentle Anchors

ตัวอย่าง:

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

ทดสอบความเข้ากันได้กับ:

• Mac Firefox, Safari, Opera
• Windows Firefox, Opera, Safari, Internet Explorer 5.55+
• Linux ยังไม่ทดลอง แต่ควรใช้ได้กับ Firefox เป็นอย่างน้อย

มาปาร์ตี้ช้า แต่นี่คือรหัส javascript อย่างเดียวง่ายๆเพื่อเลื่อนองค์ประกอบใด ๆไปที่ด้านล่าง:

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

สำหรับการเลื่อนลงในซีลีเนียมให้ใช้รหัสด้านล่าง:

จนกระทั่งด้านล่างหล่นลงเลื่อนไปจนถึงความสูงของหน้า ใช้โค้ดจาวาสคริปต์ด้านล่างซึ่งใช้ได้ดีทั้ง JavaScript และ React

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

คำตอบมากมายที่พยายามคำนวณความสูงของเอกสาร แต่มันคำนวณไม่ถูกต้องสำหรับฉัน อย่างไรก็ตามทั้งสองทำงาน:

jQuery

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

หรือแค่ js

    window.scrollTo(0,9999);

นี่คือทางออกของฉัน:

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

สิ่งนี้จะรับประกันเลื่อนไปด้านล่าง

รหัสใหญ่

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

ภาพที่มีค่าพันคำ:

กุญแจสำคัญคือ:

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

มันใช้document.documentElementซึ่งเป็น<html>องค์ประกอบ มันก็เหมือนกับการใช้windowแต่มันก็เป็นแค่ความชอบส่วนตัวของฉันที่จะทำแบบนี้เพราะถ้ามันไม่ได้เป็นทั้งหน้า แต่เป็นที่เก็บมันก็ใช้ได้เหมือนกันยกเว้นคุณจะเปลี่ยนdocument.bodyและการdocument.documentElementdocument.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;
}

วิธีง่ายๆถ้าคุณต้องการเลื่อนองค์ประกอบเฉพาะลง

เรียกใช้ฟังก์ชันนี้เมื่อใดก็ตามที่คุณต้องการเลื่อนลง

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>

ฉันมีแอปพลิเคชันเชิงมุมที่มีเนื้อหาแบบไดนามิกและฉันลองตอบคำถามหลายข้อข้างต้นด้วยความสำเร็จไม่มาก ฉันปรับคำตอบของ @ Konard และทำให้มันทำงานใน JS ธรรมดาสำหรับสถานการณ์ของฉัน:

HTML

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

CSS

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

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

JS

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 และ Stock ล่าสุด นี่คือซอ:

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

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

window.scrollTo (0,1e10);

ทำงานได้เสมอ

1e10 เป็นจำนวนมาก ดังนั้นจึงเป็นจุดสิ้นสุดของหน้าเสมอ

ถ้ามีคนค้นหา Angular

คุณเพียงแค่ต้องเลื่อนลงเพิ่มสิ่งนี้ใน div ของคุณ

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

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