Saya punya meja besar dengan bilah gulir vertikal. Saya ingin menggulir ke baris tertentu dalam tabel ini menggunakan jQuery / Javascript.

Apakah ada metode bawaan untuk melakukan ini?

Ini adalah sedikit contoh untuk dimainkan.

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>

Sangat sederhana. Tidak diperlukan plugin .

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

Berikut ini contoh kerjanya .

Dokumentasi untukscrollTop .

Saya menyadari ini tidak menjawab pengguliran dalam wadah, tetapi orang-orang merasa berguna:

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

Kami memilih html dan tubuh karena penggulung dokumen bisa berada di salah satu dan sulit untuk menentukan mana. Untuk peramban modern, Anda dapat melakukannya $(document.body).

Atau, untuk pergi ke bagian atas halaman:

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

Atau tanpa animasi:

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

ATAU...

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

Saya setuju dengan Kevin dan yang lainnya, menggunakan plugin untuk ini tidak ada gunanya.

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

Saya berhasil melakukannya sendiri. Tidak perlu plugin apa pun. Lihat intisari saya :

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

Anda dapat menggunakan scrollIntoView()metode dalam javascript. berikan sajaid.scrollIntoView();

Sebagai contoh

row_5.scrollIntoView();

Anda dapat menggunakan plugin plugin jQuery scrollTo :

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

Gulir elemen ke tengah wadah

Untuk membawa elemen ke tengah wadah.

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

Ini tidak tepat ke pusat tetapi Anda tidak akan mengenalinya pada elemen yang lebih besar.

Anda dapat menggulir dengan jQuery dan JavaScript. Hanya perlu dua elemen jQuery dan kode JavaScript ini:

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

Saya melakukan kombinasi dari apa yang diposting orang lain. Sederhana dan halus

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

Tidak yakin mengapa tidak ada yang mengatakan yang jelas, karena ada scrollTofungsi javascript bawaan :

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

Referensi .

Bertentangan dengan apa yang kebanyakan orang di sini menyarankan, saya akan merekomendasikan Anda lakukan menggunakan plugin jika Anda ingin menghidupkan bergerak. Hanya menghidupkan scrollTop tidak cukup untuk pengalaman pengguna yang lancar. Lihat jawaban saya di sini untuk alasannya.

Saya telah mencoba beberapa plugin selama bertahun-tahun, tetapi akhirnya menulis sendiri. Anda mungkin ingin mencobanya: jQuery.scrollable . Dengan menggunakan itu, tindakan gulir menjadi

$container.scrollTo( targetPosition );

Tapi itu belum semuanya. Kita perlu memperbaiki posisi target juga. Perhitungan yang Anda lihat di jawaban lain,

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

sebagian besar bekerja tetapi tidak sepenuhnya benar. Itu tidak menangani perbatasan wadah gulir dengan benar. Elemen target digulir ke atas terlalu jauh, dengan ukuran perbatasan. Ini demo.

Karenanya, cara yang lebih baik untuk menghitung posisi target adalah

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

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

Sekali lagi, lihat demo untuk melihatnya dalam aksi.

Untuk fungsi yang mengembalikan posisi target dan berfungsi untuk wadah gulir jendela dan non-jendela, jangan ragu untuk menggunakan inti ini . Komentar di sana menjelaskan bagaimana posisi dihitung.

Pada awalnya, saya telah mengatakan akan lebih baik menggunakan plugin untuk scrolling animasi . Anda tidak perlu plugin, jika Anda ingin melompat ke target tanpa transisi. Lihat jawaban oleh @ames untuk itu, tetapi pastikan Anda menghitung posisi target dengan benar jika ada perbatasan di sekitar wadah.

Untuk apa nilainya, ini adalah bagaimana saya berhasil mencapai perilaku seperti itu untuk elemen umum yang dapat berada di dalam DIV dengan menggulir (tanpa mengetahui wadah)

Ini menciptakan input palsu dari ketinggian elemen target, dan kemudian menempatkan fokus padanya, dan browser akan mengurus sisanya tidak peduli seberapa dalam dalam hierarki digulir Anda. Bekerja seperti pesona.

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

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

Saya melakukan kombinasi ini. ini bekerja untuk saya. tetapi menghadapi satu masalah jika klik pindahkan bahwa ukuran div terlalu besar sehingga gulir scenerio tidak turun ke div khusus ini.

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

        }