Ответ 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.

Ответ 2

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

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

Мы выбираем как html, так и тело, потому что скроллер документа может быть и на одном, и трудно определить, какой из них. Для современных браузеров вы можете уйти с $(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)

Ответ 3

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

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

Ответ 4

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

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

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

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

Ответ 5

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

Ответ 6

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

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

Ссылка.

Ответ 7

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

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

Ответ 8

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

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

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

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

Ответ 9

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

Например

row_5.scrollIntoView();

Ответ 10

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

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

DEMO на 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;
}

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

Ответ 11

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

Ответ 12

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