เลื่อนกลับไปที่ด้านบนสุดของ div ที่เลื่อนได้

<div id="containerDiv"></div>

#containerDiv {
  position: absolute;
  top: 0px;
  width: 400px;
  height: 100%;
  padding: 5px;
  font-size: .875em;
  overflow-y: scroll;
}

document.getElementById("containerDiv").innerHTML = variableLongText;

จะรีเซ็ตตำแหน่งเลื่อนกลับไปด้านบนของคอนเทนเนอร์ div ในครั้งต่อไปได้อย่างไร

var myDiv = document.getElementById('containerDiv');
myDiv.innerHTML = variableLongText;
myDiv.scrollTop = 0;

ดูscrollTopแอตทริบิวต์

อีกวิธีในการทำภาพเคลื่อนไหวที่ราบรื่นก็เป็นเช่นนี้

$("#containerDiv").animate({ scrollTop: 0 }, "fast");

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

$('body, html, #containerDiv').scrollTop(0);

scrollTo

window.scrollTo(0, 0);

เป็นทางออกที่ดีที่สุดสำหรับการเลื่อนหน้าต่างไปด้านบน - ส่วนที่ดีที่สุดคือไม่ต้องใช้ id selector ใด ๆ และแม้ว่าเราจะใช้โครงสร้าง IFRAME ก็จะทำงานได้ดีมาก

scrollTo () วิธีการเลื่อนเอกสารไปยังพิกัดที่ระบุ
window.scrollTo (xpos, ypos);
จำเป็นต้องมีหมายเลข xpos พิกัดที่จะเลื่อนไปตามแกน x (แนวนอน) เป็นพิกเซล
ypos Number (ต้องระบุ) พิกัดที่จะเลื่อนไปตามแกน y (แนวตั้ง) เป็นพิกเซล

jQuery

อีกทางเลือกหนึ่งในการทำเช่นเดียวกันคือการใช้ jQuery และจะให้รูปลักษณ์ที่นุ่มนวลขึ้น

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

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

สิ่งนี้ใช้ได้ผลสำหรับฉัน:

document.getElementById('yourDivID').scrollIntoView();

สำหรับผู้ที่ยังไม่สามารถทำงานนี้ได้ตรวจสอบให้แน่ใจว่าได้แสดงองค์ประกอบที่ล้นแล้วก่อนที่จะใช้ฟังก์ชัน jQueryองค์ประกอบที่ล้นจะปรากฏขึ้นก่อนที่จะใช้ฟังก์ชั่น

กันตัวอย่าง:

$('#elem').show();
$('#elem').scrollTop(0);

สำหรับฉันวิธี scrollTop ใช้ไม่ได้ แต่ฉันพบวิธีอื่น:

element.style.display = 'none';
setTimeout(function() { element.style.display = 'block' }, 100);

ไม่ได้ตรวจสอบเวลาขั้นต่ำสำหรับการเรนเดอร์ css ที่เชื่อถือได้ 100ms อาจจะมากเกินไป

หากคุณต้องการเลื่อนด้วยการเปลี่ยนที่ราบรื่นคุณสามารถใช้สิ่งนี้ได้!

(วานิลลา JS)

const tabScroll = document.getElementById("tabScroll");
window.scrollTo({
  'behavior': 'smooth',
  'left': 0,
  'top': tabScroll.offsetTop - 80
});

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

หวังว่านี่จะช่วยได้ !!

ตามคำตอบของFrançoisNoël "สำหรับผู้ที่ยังไม่สามารถทำงานนี้ได้โปรดตรวจสอบให้แน่ใจว่าได้แสดงองค์ประกอบที่ล้นแล้วก่อนที่จะใช้ฟังก์ชัน jQuery"

ฉันทำงานในโมดอล bootstrap ที่ฉันใช้สิทธิ์บัญชีซ้ำ ๆ ใน div ที่ล้นในมิติ y ปัญหาของฉันคือฉันพยายามใช้ฟังก์ชัน jquery .scrollTop (0) และมันจะไม่ได้ผลไม่ว่าฉันจะพยายามทำอย่างไร ฉันต้องตั้งค่าเหตุการณ์สำหรับโมดอลที่ไม่ได้รีเซ็ตแถบเลื่อนจนกว่าโมดอลจะหยุดเคลื่อนไหว ในที่สุดรหัสที่ใช้ได้ผลสำหรับฉันอยู่ที่นี่:

    $('#add-modal').on('shown.bs.modal', function (e) {
        $('div.border').scrollTop(0);
    });

หากเนื้อหา html ล้นวิวพอร์ตเดียวสิ่งนี้ใช้ได้กับฉันโดยใช้จาวาสคริปต์เท่านั้น:

document.getElementsByTagName('body')[0].scrollTop = 0;

ความนับถือ,

นี่เป็นวิธีเดียวที่ใช้ได้ผลสำหรับฉันด้วยการเลื่อนที่ราบรื่น:

  $('html, body').animate({
    scrollTop: $('#containerDiv').offset().top,
  }, 250);

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

document.getElementByClassName("dropdown-menu").scrollTop = 0

คงไม่ได้ผล ใช้รหัสด้านล่างแทน

document.getElementByClassName("dropdown-menu")[0].scrollTop = 0

ฉันคิดว่าคนอื่นอาจประสบปัญหาคล้าย ๆ กับฉัน ดังนั้นควรทำเคล็ดลับ

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

$('body, html, #containerDiv').scrollTop(0);
document.getElementById('yourDivID').scrollIntoView();

หากคุณต้องการเลื่อนโดยใช้ชื่อคลาสให้ใช้รหัสด้านล่าง

var $container = $("html,body");
var $scrollTo = $('.main-content');

$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},300);

ID ควรมี id ของ div ที่เกี่ยวข้องซึ่งมีคุณสมบัติ overflow css

document.querySelector('#YOUR_OVERFLOWED_DIV').scrollTop = 0;