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

Мертвий простий. Не потрібні додатки .

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 .

Я розумію, що це не відповідає прокрученню контейнера, але люди вважають його корисним так:

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

Я погоджуюся з Кевіном та іншими, використовувати плагін для цього безглуздо.

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

Мені вдалося це зробити самостійно. Не потрібно ніяких плагінів. Перевір мою суть :

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

Ви можете використовувати scrollIntoView()метод у javascript. просто дайid.scrollIntoView();

Наприклад

row_5.scrollIntoView();

Ви можете використовувати плагін jQuery scrollTo :

$('div').scrollTo('#row_8');

Прокрутіть елемент до центру контейнера

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

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

Це не точно до центру, але ви не розпізнаєте його на більш великих елементах.

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

Я зробив комбінацію того, що розмістили інші. Його просто і гладко

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

Не впевнений, чому ніхто не каже очевидного, оскільки вбудований JavaScript scrollTo функція :

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

Довідково .

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

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

Я зробив це поєднання. його робота для мене. але стикається з однією проблемою, якщо натиснути перемістити цей розмір div занадто великий, щоб scenerio прокручувати не вниз до цього конкретного div.

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

        }