我结合了其他人发布的内容。它简单流畅

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

你可以通过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>

不知道为什么没有人说显而易见的，因为javascript中有一个内置的scrollTo函数:

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

参考。

我意识到这不能解决在容器中滚动的问题，但人们发现它很有用，所以:

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

为了它的价值，这就是我如何设法实现这种行为的一般元素，可以在一个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();

你可以在javascript中使用scrollIntoView()方法。 只需要给id.scrollIntoView();

例如

row_5.scrollIntoView();