Как прокрутить до определенного элемента с помощью jQuery?

Question

У меня большой стол с вертикальной полосой прокрутки. Я хотел бы перейти к определенной строке в этой таблице, используя 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>

Answer 1

очень просто. Плагины не нужны .

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.

Answer 2

Я понимаю, что это не отвечает на прокрутку в контейнере, но люди находят это полезным, так:

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

Мы выбираем html и body, потому что прокрутка документа может быть включена, и сложно определить, какой именно. Для современных браузеров вы можете уйти с $(document.body).

Или, чтобы перейти в начало страницы:

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

или без анимации:

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

OR ...

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

Answer 3

Я согласен с Кевином и другими, использовать плагин для этого бессмысленно.

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

Answer 4

Лучший плагин, который я нашел, был суть .

Это, пожалуй, не плагин, но он делает работу одного, и это решило мои проблемы. к сожалению, это работает только в FireFox. Не знаю, почему Chrome не нравится / не хочет его запускать.

РЕДАКТИРОВАТЬ: Между тем мне удалось сделать это сам. Не нужно никаких плагинов. Проверьте мой гист :

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

Answer 5

Вы можете использовать scrollIntoView() метод в JavaScript. просто дайте id.scrollIntoView();

Например

row_5.scrollIntoView();

Answer 6

Я всегда считал плагин jQuery scrollTo очень полезным для этого. Поиграйте с демками, чтобы узнать, подходит ли вам это.

Answer 7

Вы можете прокрутить 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>

Answer 8

Элемент прокрутки к центру контейнера

Чтобы привести элемент к центру контейнера.

ДЕМО на 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>

1017 * CSS * .container { height: 60px; overflow-y: scroll; width 60px; background-color: white; } Это не точно по центру, но вы не узнаете его на более крупных элементах.

Answer 9

Вопреки тому, что предлагает большинство людей, я бы порекомендовал вам делать использовать плагин, если вы хотите оживить движение. Одного анимированного 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;

Опять же, посмотрите на демо , чтобы увидеть его в действии.

Для функции, которая возвращает целевую позицию и работает для оконных и неоконных контейнеров прокрутки, не стесняйтесь использовать this gist . Комментарии там объясняют, как рассчитывается позиция.

В начале я сказал, что было бы лучше использовать плагин для анимированной прокрутки. Однако вам не нужен плагин, если вы хотите перейти к цели без перехода. Посмотрите ответ @ James для этого, но убедитесь, что вы правильно рассчитали целевую позицию, если вокруг контейнера есть граница.

Answer 10

Я сделал комбинацию того, что другие опубликовали. Это просто и гладко

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