Gulir Secara Otomatis ke Bawah Halaman

Anggap saya punya daftar pertanyaan. Ketika saya mengklik pertanyaan pertama, seharusnya secara otomatis membawa saya ke bagian bawah halaman.

Sebenarnya, saya tahu ini bisa dilakukan menggunakan jQuery.

Jadi, dapatkah Anda memberi saya beberapa dokumentasi atau beberapa tautan di mana saya dapat menemukan jawaban untuk pertanyaan ini?

EDIT: Perlu menggulir ke elemen HTML tertentu di bagian bawah halaman

jQuery tidak perlu. Sebagian besar hasil teratas yang saya dapatkan dari pencarian Google memberi saya jawaban ini:

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

Di mana Anda memiliki elemen bersarang, dokumen mungkin tidak menggulir. Dalam hal ini, Anda harus menargetkan elemen yang menggulir dan menggunakannya sebagai tinggi gulir.

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

Anda dapat mengikat itu ke onclickacara pertanyaan Anda (mis<div onclick="ScrollToBottom()" ... ).

Beberapa sumber tambahan yang dapat Anda lihat:

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

Jika Anda ingin menggulirkan seluruh halaman ke bawah:

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

Lihat contoh pada JSFiddle

Jika Anda ingin menggulir elemen ke bawah:

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

Dan begitulah cara kerjanya:

Ref: scrollTop , scrollHeight , clientHeight

UPDATE: Versi terbaru Chrome (61+) dan Firefox tidak mendukung pengguliran tubuh, lihat: https://dev.opera.com/articles/fixing-the-scrolltop-bug/

Implementasi Vanilla JS:

element.scrollIntoView(false);

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

Anda dapat menggunakan ini untuk membuka halaman dalam format animasi.

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

Di bawah ini harus menjadi solusi lintas peramban. Ini telah diuji pada Chrome, Firefox, Safari dan IE11

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

window.scrollTo (0, document.body.scrollHeight); tidak berfungsi di Firefox, setidaknya untuk Firefox 37.0.2

Terkadang halaman meluas pada scroll ke buttom (misalnya di jejaring sosial), untuk menggulir ke bawah sampai akhir (buttom utama halaman) Saya menggunakan skrip ini:

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

Dan jika Anda berada di konsol javascript peramban, mungkin bermanfaat untuk dapat menghentikan pengguliran, jadi tambahkan:

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

Dan kemudian gunakan stopScroll();.

Jika Anda perlu menggulir ke elemen tertentu, gunakan:

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

Atau skrip universal untuk autoscrolling ke elemen tertentu (atau hentikan interval pengguliran halaman):

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

Anda dapat menggunakan fungsi ini di mana pun Anda perlu menyebutnya:

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

}

jquery.com: ScrollTo

Anda dapat melakukannya juga dengan animasi, ini sangat sederhana

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

semoga membantu, terima kasih

satu liner untuk memperlancar gulir ke bawah

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

Untuk menggulir ke atas cukup diatur topke0

Anda dapat melampirkan apa saja idke atribut referensi hrefelemen tautan:

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

Pada contoh di atas ketika pengguna mengklik Click medi bagian bawah halaman, navigasi menavigasi ke Click medirinya sendiri.

Anda dapat mencoba Gentle Anchors sebagai plugin javascript yang bagus.

Contoh:

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

Kompatibilitas Diuji pada:

• Mac Firefox, Safari, Opera
• Windows Firefox, Opera, Safari, Internet Explorer 5.55+
• Linux belum teruji tetapi setidaknya harus baik-baik saja dengan Firefox

Terlambat ke pesta, tapi inilah beberapa kode khusus javascript untuk menggulir elemen apa pun ke bawah:

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

Untuk Gulir ke bawah di Selenium gunakan kode di bawah ini:

Hingga bagian bawah jatuh ke bawah, gulir hingga ketinggian halaman. Gunakan kode javascript di bawah ini yang akan berfungsi dengan baik di JavaScript dan React.

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

Begitu banyak jawaban yang mencoba menghitung ketinggian dokumen. Tetapi bagi saya itu tidak menghitung dengan benar. Namun, keduanya bekerja:

jquery

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

atau hanya js

    window.scrollTo(0,9999);

Inilah solusi saya:

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

Ini akan menjamin gulir ke bawah

Kode Kepala

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

Kode tubuh

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

Sebuah gambar bernilai ribuan kata:

Kuncinya adalah:

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

Itu menggunakan document.documentElement, yang merupakan <html>elemen. Ini seperti menggunakan window, tetapi ini hanya preferensi pribadi saya untuk melakukannya dengan cara ini, karena jika bukan seluruh halaman tetapi sebuah wadah, ia berfungsi seperti ini kecuali Anda akan berubah document.bodydan document.documentElementmelakukannya document.querySelector("#container-id").

Contoh:

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

Anda dapat membandingkan perbedaannya jika tidak ada 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;
}

Cara sederhana jika Anda ingin menggulir ke bawah elemen tertentu

Panggil fungsi ini kapan pun Anda ingin menggulir ke bawah.

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>

Saya memiliki aplikasi Angular dengan konten dinamis dan saya mencoba beberapa jawaban di atas dengan tidak banyak berhasil. Saya mengadaptasi jawaban @ Konard dan membuatnya berfungsi dalam JS sederhana untuk skenario saya:

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

Diuji pada browser Android Chrome, FF, Edge, dan stock terbaru. Ini biola:

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

selalu berhasil.

1e10 adalah angka besar. jadi selalu bagian akhir halaman.

Jika ada yang mencari Angular

Anda hanya perlu gulir ke bawah, tambahkan ini ke div Anda

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

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