如何使用 jQuery 滚动到特定项目？

死的简单。不需要插件。

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()
});​

这是一个working example。

Documentation for scrollTop。

---

我意识到这并不能回答在容器中滚动，但人们发现它很有用，所以：

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

---

我同意 Kevin 和其他人的观点，为此使用插件是没有意义的。

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

---

我自己设法做到了。不需要任何插件。查看我的 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);
});

---

您可以在 javascript 中使用 scrollIntoView() 方法。给id.scrollIntoView();

例如

row_5.scrollIntoView();

---

您可以使用 the jQuery scrollTo plugin 插件：

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

---

滚动元素到容器中心

将元素带到容器的中心。

DEMO on 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() { // 通用选择器可以在任何地方使用 $(".js-scroll-to-id").click(function(e) { // 动态获取 href var destination = $(this).attr ('href'); // 防止 href=“#” 链接更改 URL 哈希（可选） e.preventDefault(); // 动画滚动到目标 $('html, body').animate({ scrollTop: $ (目标).offset().top }, 1500); }); }); #pane1 { 背景：#000;宽度：400px；高度：400px； } #pane2 { 背景：#ff0000;宽度：400px；高度：400px； } #pane3 { 背景：#ccc;宽度：400px；高度：400px； }

• 第 1 项
• 项目2
• 项目3

• 第 1 项
• 第 2 项
• 第 3 项

---

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

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

Reference。

---

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

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

---

与这里大多数人的建议相反，如果您想为移动设置动画，我建议您做使用插件。仅仅为 scrollTop 设置动画还不足以提供流畅的用户体验。有关原因，请参见 my answer here。

多年来我尝试了许多插件，但最终自己编写了一个。您可能想试一试：jQuery.scrollable。使用它，滚动动作变成

$container.scrollTo( targetPosition );

但这还不是全部。我们也需要固定目标位置。您在其他答案中看到的计算，

$target.offset().top - $container.offset().top + $container.scrollTop()

大部分有效，但并不完全正确。它没有正确处理滚动容器的边框。目标元素向上滚动太多，超出了边框的大小。 Here is a demo.

因此，计算目标位置的更好方法是

var target = $target[0], 
    container = $container[0];

targetPosition = $container.scrollTop() + target.getBoundingClientRect().top - container.getBoundingClientRect().top - container.clientTop;

再次查看 at the demo 以了解它的实际效果。

对于返回目标位置并适用于窗口和非窗口滚动容器的函数，请随意使用 this gist。那里的评论解释了如何计算位置。

一开始，我说过最好使用动画滚动插件。但是，如果您想在没有过渡的情况下跳转到目标，则不需要插件。请参阅 answer by @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 大小太大，场景滚动不会向下到这个特定的 div，则会面临一个问题。

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

        }

---