Как перейти к конкретному элементу с помощью 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>
1766   12  

12 ответов:

мертвый простой. плагины не нужны.

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.

516  
2017-10-06 05:04:13

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

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

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

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

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

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

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

или...

window.scrollTo(0, some_element.offset().top); // native equivalent (x, y)
105  
2016-12-14 05:03:10

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

window.scrollTo(0, $("#element").offset().top);
25  
2013-09-04 12:17:11

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

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

EDIT: тем временем мне удалось сделать это самому. Нет необходимости в каких-либо плагинов. Проверьте мой суть:

// 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);
});
8  
2015-06-05 05:03:09

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

3  
2016-10-21 00:51:33

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

row_5.scrollIntoView();
2  
2016-02-17 11:40:12

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

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

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

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

ссылка.

1  
2015-02-17 12:18:48

вопреки тому, что большинство людей здесь предлагают, я бы рекомендовал вам do использовать плагин, если вы хотите анимировать движение. Просто анимация scrollTop недостаточно для плавного пользовательского опыта. Смотрите мой ответ здесь для рассуждения.

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

$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  
2017-05-23 15:26:35

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

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

демо на 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;
}

это не точно в центр, но вы не узнаете его на больших больших элементов.

1  
2016-03-11 17:17:53

вы можете прокрутить по 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>
1  
2016-06-14 15:26:10

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

Comments

    Ничего не найдено.
Click here to cancel reply.