ฉันมีตารางใหญ่พร้อมแถบเลื่อนแนวตั้ง ฉันต้องการเลื่อนไปยังบรรทัดที่ระบุในตารางนี้โดยใช้ jQuery / Javascript

มีวิธีการในการทำเช่นนี้?

นี่คือตัวอย่างเล็ก ๆ น้อย ๆ ที่จะเล่นกับ

div {
    width: 100px;
    height: 70px;
    border: 1px solid blue;
    overflow: auto;
}

<div>
    <table id="my_table">
        <tr id='row_1'><td>1</td></tr>
        <tr id='row_2'><td>2</td></tr>
        <tr id='row_3'><td>3</td></tr>
        <tr id='row_4'><td>4</td></tr>
        <tr id='row_5'><td>5</td></tr>
        <tr id='row_6'><td>6</td></tr>
        <tr id='row_7'><td>7</td></tr>
        <tr id='row_8'><td>8</td></tr>
        <tr id='row_9'><td>9</td></tr>
    </table>
</div>

ง่ายตาย ไม่มีปลั๊กอินที่จำเป็น

var $container = $('div'),
    $scrollTo = $('#row_8');

$container.scrollTop(
    $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
);

// Or you can animate the scrolling:
$container.animate({
    scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
});​

นี่คือตัวอย่างการทำงาน

scrollTopเอกสาร

ฉันรู้ว่าสิ่งนี้ไม่ได้คำตอบการเลื่อนในคอนเทนเนอร์ แต่ผู้คนพบว่ามันมีประโยชน์ดังนั้น:

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

เราเลือกทั้ง html และ body เพราะ scroller เอกสารอาจเปิดอยู่และมันยากที่จะกำหนดว่า สำหรับเบราว์เซอร์ที่ทันสมัยคุณสามารถหนีไป$(document.body)ได้

หรือไปที่ด้านบนของหน้า:

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

หรือไม่มีภาพเคลื่อนไหว:

$(window).scrollTop(some_element.offset().top);

หรือ...

window.scrollTo(0, some_element.offset().top); // native equivalent (x, y)

ฉันเห็นด้วยกับเควินและคนอื่น ๆ การใช้ปลั๊กอินสำหรับสิ่งนี้ไม่มีจุดหมาย

window.scrollTo(0, $("#element").offset().top);

ฉันจัดการเพื่อทำมันเอง ไม่จำเป็นต้องใช้ปลั๊กอินใด ๆ ตรวจสอบส่วนสำคัญของฉัน:

// Replace #fromA with your button/control and #toB with the target to which     
// You wanna scroll to. 
//
$("#fromA").click(function() {
    $("html, body").animate({ scrollTop: $("#toB").offset().top }, 1500);
});

คุณสามารถใช้scrollIntoView()วิธีการในจาวาสคริปต์ แค่ให้id.scrollIntoView();

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

row_5.scrollIntoView();

คุณสามารถใช้ปลั๊กอินปลั๊กอินjQuery scrollTo :

$('div').scrollTo('#row_8');

เลื่อนองค์ประกอบไปยังกึ่งกลางของคอนเทนเนอร์

เพื่อนำองค์ประกอบไปที่กึ่งกลางของคอนเทนเนอร์

DEMO บน CODEPEN

JS

function scrollToCenter() {
  var container = $('.container'),
    scrollTo = $('.5');

  container.animate({
    //scrolls to center
    scrollTop: scrollTo.offset().top - container.offset().top + scrollTo.scrollTop() - container.height() / 2
  });
}

HTML

<div class="container">
   <div class="1">
    1
  </div>
  <div class="2">
    2
  </div>
  <div class="3">
    3
  </div>
  <div class="4">
    4
  </div>
  <div class="5">
    5
  </div>
  <div class="6">
    6
  </div>
  <div class="7">
    7
  </div>
  <div class="8">
    8
  </div>
  <div class="9">
    9
  </div>
  <div class="10">
    10
  </div>


</div>
<br>
<br>
<button id="scroll" onclick="scrollToCenter()">
  Scroll
</button>

CSS

.container {
  height: 60px;
  overflow-y: scroll;
  width 60px;
  background-color: white;
}

มันไม่ได้อยู่ตรงกลาง แต่คุณจะไม่จดจำมันในองค์ประกอบที่ใหญ่กว่า

คุณสามารถเลื่อนโดยjQueryและJavaScript เพียงต้องการสององค์ประกอบ jQuery และรหัส JavaScript นี้:

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to-id").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 1500);
  });
});

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to-id").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 1500);
  });
});

#pane1 {
  background: #000;
  width: 400px;
  height: 400px;
}

#pane2 {
  background: #ff0000;
  width: 400px;
  height: 400px;
}

#pane3 {
  background: #ccc;
  width: 400px;
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li>
    <a href="#pane1" class=" js-scroll-to-id">Item 1</a>
  </li>
  <li>
    <a href="#pane2" class="js-scroll-to-id">Item 2</a>
  </li>
  <li>
    <a href="#pane3" class=" js-scroll-to-id">Item 3</a>
  </li>
</ul>
<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>
<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#pane3" class="js-scroll-to-id">Item 1</a>
  </li>
  <li>
    <a href="#pane2" class="js-scroll-to-id">Item 2</a>
  </li>
  <li>
    <a href="#pane1" class="js-scroll-to-id">Item 3</a>
  </li>
</ul>

ฉันได้รวมสิ่งที่คนอื่นโพสต์ไว้ มันง่ายและราบรื่น

 $('#myButton').click(function(){
        $('html, body').animate({
            scrollTop: $('#scroll-to-this-element').position().top },
            1000
        );
    });

ไม่แน่ใจว่าทำไมไม่มีใครบอกชัดเจนเพราะมีscrollToฟังก์ชั่นจาวาสคริปต์ในตัว:

scrollTo( $('#element').position().top );

การอ้างอิง

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

ฉันลองใช้งานปลั๊กอินมาหลายปีแล้ว แต่ในที่สุดฉันก็เขียนเอง คุณอาจต้องการที่จะให้มันหมุน: jQuery.scrollable การใช้สิ่งนั้นการเลื่อนจะกลายเป็น

$container.scrollTo( targetPosition );

แต่นั่นไม่ใช่ทั้งหมด เราจำเป็นต้องแก้ไขตำแหน่งเป้าหมายด้วย การคำนวณที่คุณเห็นในคำตอบอื่น ๆ

$target.offset().top - $container.offset().top + $container.scrollTop()

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

ดังนั้นวิธีที่ดีกว่าในการคำนวณตำแหน่งเป้าหมายคือ

var target = $target[0], 
    container = $container[0];

targetPosition = $container.scrollTop() + target.getBoundingClientRect().top - container.getBoundingClientRect().top - container.clientTop;

ลองดูตัวอย่างเพื่อดูตัวอย่าง

สำหรับฟังก์ชั่นที่ส่งคืนตำแหน่งเป้าหมายและใช้ได้กับทั้งภาชนะบรรจุหน้าต่างและที่ไม่ใช่หน้าต่างให้ใช้ส่วนสำคัญนี้ได้ฟรี ความคิดเห็นในนั้นอธิบายวิธีคำนวณตำแหน่ง

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

สำหรับสิ่งที่คุ้มค่านี่คือวิธีที่ฉันจัดการเพื่อให้บรรลุพฤติกรรมดังกล่าวสำหรับองค์ประกอบทั่วไปซึ่งสามารถอยู่ใน DIV ด้วยการเลื่อน (โดยไม่รู้ตัวคอนเทนเนอร์)

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

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();

ฉันทำชุดค่าผสมนี้ มันทำงานให้ฉัน แต่หันหน้าไปทางหนึ่งปัญหาหากคลิกย้ายขนาด div ที่มีขนาดใหญ่เกินไปที่ scenerio เลื่อนไม่ลงไป div นี้โดยเฉพาะ

 var scrollDownTo =$("#show_question_" + nQueId).position().top;
        console.log(scrollDownTo);
        $('#slider_light_box_container').animate({
            scrollTop: scrollDownTo
            }, 1000, function(){
        });

        }