Mam duży stół z pionowym paskiem przewijania. Chciałbym przewinąć do określonego wiersza w tej tabeli przy użyciu jQuery / JavaScript.

Czy istnieją wbudowane metody, aby to zrobić?

Oto mały przykład do zabawy.

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>

Zupełnie proste. Żadne wtyczki nie są potrzebne .

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

Oto działający przykład .

Dokumentacja dlascrollTop .

Zdaję sobie sprawę, że to nie odpowiada na przewijanie w kontenerze, ale ludzie uważają to za przydatne, więc:

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

Wybieramy zarówno html, jak i body, ponieważ moduł przewijania dokumentów może znajdować się na jednym z nich i trudno jest ustalić, który z nich. W przypadku nowoczesnych przeglądarek możesz uciec $(document.body).

Lub, aby przejść na górę strony:

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

Lub bez animacji:

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

LUB...

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

Zgadzam się z Kevinem i innymi, użycie wtyczki do tego celu jest bezcelowe.

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

Udało mi się to zrobić samemu. Nie potrzebujesz żadnych wtyczek. Sprawdź moją treść :

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

Możesz użyć scrollIntoView()metody w javascript. poprostu dajid.scrollIntoView();

Na przykład

row_5.scrollIntoView();

Możesz użyć wtyczki jQuery scrollTo :

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

Przewiń element do środka kontenera

Aby przenieść element na środek pojemnika.

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

Nie jest dokładnie na środku, ale nie rozpoznasz go na większych większych elementach.

Możesz przewijać według jQuery i JavaScript Potrzebujesz tylko dwóch elementów jQuery i tego kodu 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>

Zrobiłem kombinację tego, co napisali inni. Jest prosty i gładki

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

Nie jestem pewien, dlaczego nikt nie mówi oczywistości, ponieważ istnieje wbudowana scrollTofunkcja javascript :

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

Odniesienia .

Wbrew temu, co większość ludzi tutaj sugerują, polecam Ci zrobić użyć wtyczki jeśli chcesz animować ruch. Samo animowanie scrollTop nie wystarcza do płynnego działania użytkownika. Zobacz moją odpowiedź tutaj dla uzasadnienia.

Przez lata próbowałem wielu wtyczek, ale ostatecznie sam je napisałem. Możesz spróbować : jQuery.scrollable . Dzięki temu staje się akcja przewijania

$container.scrollTo( targetPosition );

Ale to nie wszystko. Musimy również ustalić pozycję docelową. Obliczenia widoczne w innych odpowiedziach,

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

głównie działa, ale nie jest całkowicie poprawne. Nie obsługuje poprawnie krawędzi kontenera przewijania. Element docelowy jest przewijany w górę za daleko, o rozmiar ramki. Oto demo.

Dlatego lepszym sposobem obliczenia pozycji docelowej jest

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

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

Ponownie spójrz na wersję demonstracyjną, aby zobaczyć, jak działa.

W przypadku funkcji, która zwraca pozycję docelową i działa zarówno dla kontenerów przewijanych w oknie, jak i poza oknem, możesz użyć tej funkcji . Komentarze tam wyjaśniają, w jaki sposób obliczana jest pozycja.

Na początku powiedziałem, że najlepiej byłoby użyć wtyczki do animowanego przewijania. Jednak nie potrzebujesz wtyczki, jeśli chcesz przejść do celu bez przejścia. Zobacz na to odpowiedź @James , ale pamiętaj, aby poprawnie obliczyć pozycję docelową, jeśli wokół kontenera znajduje się ramka .

O ile jest to warte, w ten sposób udało mi się osiągnąć takie zachowanie dla ogólnego elementu, który może być wewnątrz DIV z przewijaniem (bez znajomości kontenera)

Tworzy fałszywe dane wejściowe wysokości elementu docelowego, a następnie koncentruje się na nim, a przeglądarka zajmie się resztą bez względu na to, jak głęboko znajdujesz się w przewijanej hierarchii. Działa jak marzenie.

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

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

Zrobiłem to połączenie. to dla mnie praca. ale w obliczu jednego problemu, jeśli kliknięcie przenosi ten rozmiar div, jest zbyt duży, aby przewijać scenerię nie w dół do tego konkretnego div.

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

        }