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


252

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

Ответы:


563

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

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 .


4
Если в контейнере есть полоса прокрутки, вам необходимо учитывать scrollTop: scrollTo.offset (). Top - container.offset (). Top + container.scrollTop ()
claviska

1
Вы можете прокручивать все окно с помощью $ (document) .scrollTop (value) - основной код jquery решает проблемы браузера для вас.
Крис Москини

7
Если вы хотите, чтобы по scrollToцентру, а не на вершине:scrollTo.offset().top - container.offset().top + container.scrollTop() - (container.height()/2)
Mahn

7
element.scrollIntoView()- это все, что требуется. Анимация стандартизирована. См developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
WickyNilliams

7
Обратите внимание, что в самом конце блока кода есть «невидимый» символ. Символ считается недействительным в Edge, хром. -
Копировщик

114

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

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

Здравствуйте, @infensus. Можете ли вы дать мне рабочий пример, потому что мой не работает? я использовал var section2 = $ ('# section-2'); $ ('html, body'). animate ({scrollTop: section2.offset (). top});
dll_onFire

Это выглядит хорошо - вы уверены, что section2 существует? do console.log (section2.length); и убедитесь, что это не 0. Сделаем пример чуть позже.
Доминик

Почему $('html,body')? Он нужен только в конкретном контейнере. Принятый ответ лучше для меня. У меня похожий случай, как заданный вопрос, и ваш ответ не сработал для меня.
Petroff

2
@ Странно, когда я писал это, я не заметил, что элемент находился в контейнере с прокруткой. Я оставлю свой ответ как есть, потому что люди приходят сюда из поиска Google, чтобы прокрутить тело из-за заголовка вопроса
Доминик,

30

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

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

За то, что должно быть настолько простым, я потратил целую вечность на другие решения онлайн, но этот простой лайнер делает именно то, что мне нужно.
Лоуренс Коуп

3
Следует отметить, что этот способ работает для всего окна. Если вы хотите прокрутить содержимое с переполнением: прокрутка, это не сработает.
Джереми

12

Мне удалось сделать это самому. Не нужно никаких плагинов. Проверьте мою суть :

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

Твой однострочный смысл, полный анимации, был именно тем, что мне было нужно. Спасибо!
Скотт Смит

No need for any plugins?? Но вы используете JQuery! Это чертовски огромная библиотека, даже не плагин.
Зеленый

1
Я считаю, что вам не нужно добавлять ссылку в дополнение к справке по библиотеке jquery. Плюс JQuery является своего рода отраслевым стандартом. Почему бы вам не использовать его? Вероятно, это вполне выполнимо без jquery, но для этого все же потребуется, чтобы кто-то написал много кода только для анализа. Это кажется контрпродуктивным. И было бы контрпродуктивно писать полноценный плагин только для прокрутки до мелочей.
Lorddarq

4

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

Например

row_5.scrollIntoView();

Как оживить это?
Зеленый

Не нужно оживлять. При использовании scrollIntoView () элемент управления будет автоматически прокручиваться, чтобы отобразить его в представлении.
Тамилараси


2

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

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

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

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


2

Вы можете прокручивать по 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);
  });
});


1

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

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

@ AnriëtteMyburgh, я не уверен, что position () работает во всех браузерах. Вы пробовали это в других, чтобы видеть, работает ли это? Или я могу увидеть код, который вы используете, и посмотреть, есть ли что-то еще не так?
Нлинскотт

1

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

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

Ссылка .


6
scrollTo требует двух аргументов, вы написали только в одном.
NuclearPeon

2
... и он вызывается на объекте окна.
hashchange

1

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


0

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

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

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

        }
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.