Dikey kaydırma çubuğuna sahip büyük bir masam var. JQuery / Javascript kullanarak bu tablodaki belirli bir satıra kaydırmak istiyorum.

Bunu yapmak için yerleşik yöntemler var mı?

İşte oynamak için küçük bir örnek.

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>

Ölü basit. Eklenti gerekmez .

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

İşte çalışan bir örnek .

İçin belgelerscrollTop .

Bu bir kapsayıcı içinde kaydırma cevap değil ama insanlar bunu yararlı buluyorum farkında:

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

Hem html'yi hem de gövdeyi seçiyoruz çünkü belge kaydırıcısı da açık olabilir ve hangisini belirlemek zor. Modern tarayıcılar için$(document.body) .

Veya sayfanın en üstüne gitmek için:

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

Veya animasyon olmadan:

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

VEYA...

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

Kevin ve diğerleriyle hemfikirim, bunun için bir eklenti kullanmak anlamsız.

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

Kendim yapmayı başardım. Herhangi bir eklentiye gerek yok. Benim göz atın özünü :

// 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()Javascript yöntemini kullanabilirsiniz . sadece Verid.scrollIntoView();

Örneğin

row_5.scrollIntoView();

Sen kullanabilirsiniz jQuery scrollTo eklentisi eklentisi:

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

Elemanı kabın ortasına kaydırın

Elemanı kabın ortasına getirmek.

KODE ÜZERİNE DEMO

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

Merkeze tam değil, ancak daha büyük daha büyük elemanlarda tanımayacaksınız.

JQuery ve JavaScript ile kaydırma yapabilirsiniz Sadece iki eleman jQuery ve bu JavaScript koduna ihtiyacınız var:

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

Başkalarının gönderdiklerinin bir kombinasyonunu yaptım. Basit ve pürüzsüz

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

Yerleşik bir javascript scrollToişlevi olduğu için neden kimsenin açık olmadığını söylemedi :

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

Referans .

Burada çoğu insan öneriyorsun aksine, ben tavsiye ederim yapmak size hareket animasyon istiyorsanız eklenti kullanmasına. Sadece scrollTop'u canlandırmak, sorunsuz bir kullanıcı deneyimi için yeterli değildir. Bkz burada cevabımı muhakeme için.

Yıllar boyunca bir dizi eklenti denedim, ama sonunda kendim yazdım. Bir spin vermek isteyebilirsiniz: jQuery.scrollable . Bunu kullanarak kaydırma işlemi

$container.scrollTo( targetPosition );

Ama hepsi bu değil. Hedef pozisyonu da düzeltmemiz gerekiyor. Diğer cevaplarda gördüğünüz hesaplama,

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

çoğunlukla çalışır, ancak tamamen doğru değildir. Kaydırma kabının kenarlığını düzgün işlemiyor. Hedef eleman, kenarlığın boyutuna göre çok yukarı kaydırılır.İşte bir demo.

Bu nedenle, hedef pozisyonu hesaplamanın daha iyi bir yolu

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

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

Yine, eylemde görmek için demoya bir göz atın .

Hedef konumu döndüren ve hem pencere hem de pencere olmayan kaydırma kapları için çalışan bir işlev için bu özü kullanmaktan çekinmeyin . Buradaki yorumlar konumun nasıl hesaplandığını açıklar.

Başlangıçta, animasyonlu kaydırma için bir eklenti kullanmanın en iyi olacağını söyledim . Ancak bir geçiş olmadan hedefe atlamak istiyorsanız bir eklentiye ihtiyacınız yoktur. Bunun için @James tarafından verilen cevaba bakın , ancak kabın etrafında bir kenarlık varsa hedef konumu doğru bir şekilde hesapladığınızdan emin olun.

Değeri için, ben bir DIV içinde kaydırma ile (konteyner bilmeden) olabilir genel bir öğe için böyle bir davranış elde etmeyi başardı

Hedef öğenin yüksekliğinin sahte bir girdisini oluşturur ve daha sonra ona odaklanır ve kaydırılabilir hiyerarşi içinde ne kadar derin olursanız olun, tarayıcı geri kalanı ile ilgilenir. Tıkır tıkır çalışıyor.

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

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

Bu kombinasyonu ben yaptım. benim için iş. ancak bu div boyutu çok büyükse senaryo kaydırması bu div değerine kaydırılamazsa bir sorunla karşılaşırsınız.

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

        }