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

Question

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

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

279

javascript jquery scroll

Источник

user247243 25 май '10 в 15:01

13 ответов

Решение

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

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

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

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

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

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

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

ИЛИ ЖЕ...

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

118

Источник

user414062 23 янв '13 в 21:57

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

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

32

Источник

user472309 04 сен '13 в 09:17

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

Это не плагин, как говорится, но он делает работу одного, и это решило мои проблемы. к сожалению, это работает только в 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);
});

15

Источник

user250672 07 окт '12 в 19:14

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

Например

row_5.scrollIntoView();

6

Источник

user5898903 17 фев '16 в 09:21

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

4

Источник

user9021 25 май '10 в 15:07

Прокрутите элемент к центру контейнера

Подвести элемент к центру контейнера.

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

Это не точно по центру, но вы не узнаете его на более крупных элементах.

3

Источник

user2440049 11 мар '16 в 15:17

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

2

Источник

user5404861 14 июн '16 в 07:52

Не уверен, почему никто не говорит очевидное, так как есть встроенный JavaScript scrollTo функция:

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

Ссылка

2

Источник

user375960 16 апр '13 в 06:03

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

1

Источник

user508355 17 авг '15 в 15:01

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

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

1

Источник

user3314765 05 май '14 в 00:17

Я сделал эту комбинацию. Это сработало для меня, но столкнулось с одной проблемой: если щелчок переместить этот размер div слишком велик, сценарий прокручивается не вниз к этому конкретному div.

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

        }

0

Источник

user11044671 22 фев '19 в 10:19

Для чего это стоит, вот как мне удалось добиться такого поведения для общего элемента, который может быть внутри 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();

0

Источник

user2868823 26 фев '16 в 11:43

Другие вопросы по тегам javascript jquery scroll

user21677 25 май '10 в 15:20 2010-05-25 15:20 · Accepted Answer · 2010-05-25 15:20

Смертельно просто. Не нужно никаких плагинов.

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,