jquery: $ (window) .scrollTop () tetapi tidak ada $ (window) .scrollBottom ()

86

Saya ingin menempatkan elemen ke bagian bawah halaman setiap kali pengguna menggulir halaman. Ini seperti "posisi tetap" tetapi saya tidak dapat menggunakan "posisi: tetap" css karena banyak browser klien saya tidak dapat mendukungnya.

Saya perhatikan jquery bisa mendapatkan posisi teratas viewport saat ini, tapi bagaimana saya bisa mendapatkan bagian bawah viewport gulir?

Jadi saya bertanya bagaimana cara mengetahui: $ (window) .scrollBottom ()

javascript jquery Bin Chen
sumber

Jawaban:

148 
var scrollBottom = $(window).scrollTop() + $(window).height();
David Tang
sumber
19
Anda akan berpikir jika sesederhana ini, itu bisa dimasukkan dalam kerangka inti sebagai .scrollBottom (). Aneh ..
Curt
39
scroll Topadalah # piksel vertikal dari dokumen Topke jendela yang terlihat Top. Sebagai kebalikan dari scroll Top, scroll Bottomharus mengukur # piksel vertikal dari dokumen Bottomke jendela yang terlihat Bottom(yaitu jawaban Alfred di bawah). Apa ini memberi adalah # dari pixel vertikal dari dokumen _top_ke jendela terlihat Bottom. Ini berguna pasti, meskipun tidak bisa menyebutnya kebalikan dari ScrollBottom (saya tahu ini adalah jawaban yang ditandai tetapi untuk pembaca masa depan seperti saya)
DeepSpace101
1
Solusi ini tidak akan berhasil jika jarak dari atas bisa berbeda-beda. Misalnya, jika saya memiliki <div> yang harus berjarak tertentu dari bagian bawah halaman dan halaman tersebut memiliki item yang dapat diperluas / diciutkan, itu akan mengubah tinggi badan dan oleh karena itu jarak dari bawah.
crash springfield
@crashspringfield Sebenarnya itu pertanyaan yang berbeda. Pertanyaan ini tentang menempatkan sesuatu di dekat bagian bawah viewport, bukan di bagian bawah halaman.
iPherian
88

Saya akan mengatakan bahwa scrollBottom sebagai kebalikan langsung dari scrollTop harus:

var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();

Berikut adalah tes jelek kecil yang berhasil untuk saya:

// SCROLLTESTER START //
$('<h1 id="st" style="position: fixed; right: 25px; bottom: 25px;"></h1>').insertAfter('body');

$(window).scroll(function () {
  var st = $(window).scrollTop();
  var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();

  $('#st').replaceWith('<h1 id="st" style="position: fixed; right: 25px; bottom: 25px;">scrollTop: ' + st + '<br>scrollBottom: ' + scrollBottom + '</h1>');
});
// SCROLLTESTER END //
Alfred
sumber
2
Sempurna, inilah yang saya cari ... Terima kasih!
ℛɑƒæĿᴿᴹᴿ
9

Untuk masa depan, saya telah membuat scrollBottom menjadi plugin jquery, dapat digunakan dengan cara yang sama seperti scrollTop (yaitu Anda dapat mengatur nomor dan itu akan menggulir jumlah itu dari bagian bawah halaman dan mengembalikan jumlah piksel dari bawah halaman, atau, kembalikan jumlah piksel dari bagian bawah halaman jika tidak ada nomor yang diberikan)

$.fn.scrollBottom = function(scroll){
  if(typeof scroll === 'number'){
    window.scrollTo(0,$(document).height() - $(window).height() - scroll);
    return $(document).height() - $(window).height() - scroll;
  } else {
    return $(document).height() - $(window).height() - $(window).scrollTop();
  }
}
//Basic Usage
$(window).scrollBottom(500);
Angin barat
sumber
4 
var scrollBottom =
    $(document).height() - $(window).height() - $(window).scrollTop();

Saya pikir lebih baik mendapatkan gulir bawah.

pb2q
sumber
2

Ini akan menggulir ke atas:

$(window).animate({scrollTop: 0});

Ini akan bergulir ke paling bawah:

$(window).animate({scrollTop: $(document).height() + $(window).height()});

.. ubah jendela ke id penampung atau kelas yang Anda inginkan jika perlu (dalam tanda kutip).

snoop_dog
sumber
1
Bagaimana cara menganimasikan ke bagian bawah div ketinggian tetap overflow-y: autosehingga benar-benar menggulir ke bagian bawah teks (yang melampaui tinggi div)?
pengguna1063287
1
Perbarui pertanyaan saya jika itu membantu orang lain: Saya pikir properti yang akan digunakan mungkin scrollHeight- lihat: stackoverflow.com/q/7381817
user1063287
0

Berikut adalah opsi terbaik gulir ke bawah untuk kisi tabel, ini akan digulir ke baris terakhir dari kisi tabel: 

 $('.add-row-btn').click(function () {
     var tempheight = $('#PtsGrid > table').height();
     $('#PtsGrid').animate({
         scrollTop: tempheight
         //scrollTop: $(".scroll-bottom").offset().top
     }, 'slow');
 });
SantoshK
sumber
0 
// Back to bottom button
$(window).scroll(function () {
    var scrollBottom = $(this).scrollTop() + $(this).height();
    var scrollTop = $(this).scrollTop();
    var pageHeight = $('html, body').height();//Fixed

    if ($(this).scrollTop() > pageHeight - 700) {
        $('.back-to-bottom').fadeOut('slow');
    } else {
        if ($(this).scrollTop() < 100) {
            $('.back-to-bottom').fadeOut('slow');
        }
        else {
            $('.back-to-bottom').fadeIn('slow');
        }
    }
});
$('.back-to-bottom').click(function () {
    var pageHeight = $('html, body').height();//Fixed
    $('html, body').animate({ scrollTop: pageHeight }, 1500, 'easeInOutExpo');
    return false;
});
Ghebrehiywet
sumber
0

mencoba:

 $(window).scrollTop( $('body').height() );
pengguna944550
sumber
0 
var scrolltobottom = document.documentElement.scrollHeight - $(this).outerHeight() - $(this).scrollTop();
gzenakos.dll
sumber
2
Harap hindari jawaban hanya kode dan berikan beberapa penjelasan.
Mickael B.
-3

Ini adalah peretasan cepat: cukup tetapkan nilai gulir ke angka yang sangat besar. Ini akan memastikan bahwa halaman digulir ke bawah. Menggunakan javascript biasa:

document.body.scrollTop = 100000;
dicabut
sumber
Ini tidak akan berfungsi pada halaman dengan panjang lebih dari 100000 piksel. Itu mungkin tampak seperti kasus tepi, namun dalam kasus seperti halaman bergulir tanpa akhir itu tidak mustahil. Jika Anda benar-benar menginginkan solusi tanpa jquery, jawaban ini mungkin merupakan pilihan yang lebih baik.
lucash
ya, intinya adalah menggunakan nomor sebesar mungkin katakanlah 999999999999999999999999999999.
dicabut