jQuery เลื่อนไปที่ด้านล่างของหน้า / iframe

224

ฉันจะใช้ jquery เพื่อเลื่อนลงไปที่ด้านล่างของ iframe หรือหน้าได้อย่างไร?

jquery scroll scrollto

360

หากคุณต้องการเลื่อนภาพเคลื่อนไหวช้าๆที่ดีสำหรับสมอใด ๆ ด้วยhref="#bottom"สิ่งนี้จะเลื่อนคุณไปด้านล่าง:

$("a[href='#bottom']").click(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  return false;
});

อย่าลังเลที่จะเปลี่ยนตัวเลือก

— มาร์คเออร์ซิโน
แหล่งที่มา

48

สิ่งนี้ทำงานได้ใน Firefox 3.5.7 แต่ไม่ได้อยู่ใน Chrome 4.0.295.0 การทำงานต่อไปนี้ใน Chrome: $ ('html, body'). animate ({scrollTop: $ (เอกสาร) .height ()}, 'slow');

— Tom

1

@ ทอมฉันไม่สามารถแยกความแตกต่างระหว่างโซลูชันของคุณกับมาร์คได้!

— มูฮัมหมัด Gelbana

4

@MuhammadGelbana ตรวจสอบวันที่แก้ไข ดูเหมือนว่า Mark จะอัปเดตคำตอบของเขาเพื่อรวมการแก้ไขของ Tom

— พอลปาร์คเกอร์

ที่จริงแล้วไม่จำเป็นต้องได้รับความสูงขององค์ประกอบ: stackoverflow.com/a/44578849/1450294

— Michael Scheper

210

scrollTop () ส่งคืนจำนวนพิกเซลที่ถูกซ่อนจากมุมมองจากพื้นที่ที่เลื่อนได้ดังนั้นให้:

$(document).height()

จะเกินจริงด้านล่างของหน้า สำหรับการเลื่อนเพื่อ 'หยุด' ที่ด้านล่างของหน้าความสูงปัจจุบันของหน้าต่างเบราว์เซอร์ต้องลบออก สิ่งนี้จะช่วยให้การใช้งานของการผ่อนคลายถ้าจำเป็นจึงกลายเป็น:

$('html, body').animate({ 
   scrollTop: $(document).height()-$(window).height()}, 
   1400, 
   "easeOutQuint"
);

— ทอมเบตส์
แหล่งที่มา

29

นี่ควรเป็นคำตอบที่ได้รับการยอมรับทอมถูกต้องแน่นอนคำตอบที่ได้รับการยอมรับนั้นใช้งานไม่ได้เนื่องจากการเลื่อนจะหยุดลงทันทีแทนที่จะประมวลผลการสิ้นสุดของการผ่อนคลาย

— คริสเตียน

33

หมายเหตุ: easeOutQuintต้องใช้ปลั๊กอิน jQuery ตัวเองมีเพียงและlinear swing

— newenglander

เพื่อนนี่เป็นสิ่งที่ดี! ขอบคุณ แม้แต่การทำเช่นนี้กับ 'swing' แทน 'Easeoutquint' แสดงความแตกต่างที่เห็นได้ชัดเจน '

— Jesse Head

ไม่แน่ใจว่าเป็นรูปแบบที่ไม่ถูกต้องหรือไม่ แต่ฉันแก้ไขคำตอบที่ยอมรับเพื่อเพิ่มตัวชี้ลงในคำตอบนี้ ถ้าเป็นเช่นนั้นมีคนสามารถเปลี่ยนกลับได้

— xaxxon

วิธีการแก้ปัญหานี้จะทำงานเฉพาะในกรณีที่หน้าถูกตีความในโหมดที่ได้มาตรฐาน ตัวอย่างเช่นหากคุณไม่ได้รวม<!DOCTYPE html>Chrome ไว้ Chrome จะส่งคืนค่าที่แน่นอนสำหรับหน้าต่างและความสูงของเอกสารซึ่งในกรณีนี้$(document).height()-$(window).height()จะส่งคืนค่า 0 เสมอดูที่นี่: stackoverflow.com/questions/12103208/ …

— VKK

35

ตัวอย่างเช่น:

$('html, body').scrollTop($(document).height());

— Tatu Ulmanen
แหล่งที่มา

ฉันไม่สามารถทำงานได้ ไม่ทำอะไรเลย

— Adam

@adam คุณกำลังใช้ jQuery รุ่นใดอยู่

— Sonny Boy

14

หลังจากที่หัวข้อนี้ไม่ได้ผลสำหรับฉันสำหรับความต้องการเฉพาะของฉัน (การเลื่อนภายในองค์ประกอบเฉพาะในกรณีของฉันเป็น textarea) ฉันพบสิ่งนี้ในสิ่งที่ดีกว่าซึ่งสามารถพิสูจน์ได้ว่าเป็นประโยชน์กับคนอื่นที่อ่านการสนทนานี้:

ทางเลือกบน planetcloud

เนื่องจากฉันมีวัตถุ jQuery รุ่นที่แคชไว้แล้ว ( myPanelในรหัสด้านล่างคือวัตถุ jQuery) รหัสที่ฉันเพิ่มลงในตัวจัดการเหตุการณ์ของฉันจึงเป็นแบบนี้:

myPanel.scrollTop(myPanel[0].scrollHeight - myPanel.height());

(ขอบคุณเบ็น)

— Greg Pettit
แหล่งที่มา

1

ทำงานให้ฉันด้วย div:var d = $('#mydiv'); d.scrollTop (d[0].scrollHeight - d.height ());

— gregn3

จริง ๆ แล้วคุณต้องทำคณิตศาสตร์หรือไม่? stackoverflow.com/a/44578849/1450294

— Michael Scheper

4

ฟังก์ชั่นง่าย ๆ ที่กระโดด (เลื่อนทันที) ไปที่ด้านล่างของหน้าทั้งหมด .scrollTop()โดยจะใช้ในตัว ฉันไม่ได้พยายามปรับใช้สิ่งนี้เพื่อทำงานกับองค์ประกอบของแต่ละหน้า

function jumpToPageBottom() {
    $('html, body').scrollTop( $(document).height() - $(window).height() );
}

— โรรี่โอเคน
แหล่งที่มา

2

ฉันไม่รู้ว่าทำไม แต่สิ่งนี้ไม่ได้ผลสำหรับฉันใน Firefox 26.0 และจะเลื่อนไปด้านบนเมื่อเรียกใช้ฟังก์ชันนี้ ปัญหานี้ได้รับการแก้ไขโดยการพูด$(document).scrollTop($(document).height());

— แจ็ค

2

อันนี้ใช้ได้สำหรับฉัน:

var elem = $('#box');
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
  // We're at the bottom.
}

— MountainRock
แหล่งที่มา

นี่ไม่ได้ตอบคำถาม

— huyz

2

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

$(myScrollingElement).scrollTop(Number.MAX_SAFE_INTEGER);

หากคุณต้องการเลื่อนหน้าแทนที่จะเป็นองค์ประกอบที่มีแถบเลื่อนเพียงแค่สร้างให้myScrollingElementเท่ากับ 'body, html'

เนื่องจากฉันต้องทำสิ่งนี้ในหลาย ๆ ที่ฉันได้เขียนฟังก์ชัน jQuery ที่รวดเร็วและสกปรกเพื่อให้สะดวกยิ่งขึ้นเช่นนี้:

(function($) {
  $.fn.scrollToBottom = function() {
    return this.each(function (i, element) {
      $(element).scrollTop(Number.MAX_SAFE_INTEGER);
    });
  };
}(jQuery));

ดังนั้นฉันสามารถทำสิ่งนี้เมื่อฉันผนวกสิ่งที่ buncho ':

$(myScrollingElement).append(lotsOfHtml).scrollToBottom();

— Michael Scheper
แหล่งที่มา

0

สคริปต์ที่กล่าวถึงในคำตอบก่อนหน้าเช่น:

$("body, html").animate({
    scrollTop: $(document).height()
}, 400)

หรือ

$(window).scrollTop($(document).height());

จะไม่ทำงานในChromeและจะน่ากลัวในSafari ในกรณีที่ htmlแท็กในCSSมีoverflow: auto;ชุดคุณสมบัติ ฉันใช้เวลาคิดประมาณหนึ่งชั่วโมง

— Ilia Rostovtsev
แหล่งที่มา

0

$('.block').scrollTop($('.block')[0].scrollHeight);

ฉันใช้รหัสนี้เพื่อเลื่อนการแชทเมื่อมีข้อความใหม่มาถึง

— АлександрЛиссов
แหล่งที่มา

โปรดระบุคำอธิบายสำหรับโค้ดของคุณโดยเฉพาะเมื่อคุณคัดลอกจากฐานรหัสของคุณเองโดยใช้คลาส CSS ที่ไม่เกี่ยวข้องกับคนอื่น)

— Bruno Monteiro

ใช้บล็อกใด ๆ กับแถบเลื่อน;) หรือเอกสารทั้งหมด

— АлександрЛиссов