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

IT技术 javascript jquery scroll
2021-02-05 18:10:12

我有一个带有垂直滚动条的大桌子。我想使用 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>

6个回答

死的简单。无需插件。

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。

您可以使用 $(document).scrollTop(value) 滚动整个窗口 - 底层的 jquery 代码会为您解决浏览器问题。
2021-03-30 18:10:12
请注意，代码块的末尾有一个“隐形”字符。该字符在 Edge、chrome 中被视为无效。- 复制粘贴
2021-04-07 18:10:12
如果容器有滚动条，则需要考虑 scrollTop： scrollTo.offset().top - container.offset().top + container.scrollTop()
2021-04-09 18:10:12
如果你想scrollTo居中而不是在顶部：scrollTo.offset().top - container.offset().top + container.scrollTop() - (container.height()/2)
2021-04-10 18:10:12
element.scrollIntoView()- 这就是所需要的。动画是标准化的。见developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
2021-04-11 18:10:12

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

$('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)
@Petroff 奇怪的是，当我写这篇文章时，我没有注意到该元素在滚动容器中。我会留下我的答案，因为人们从谷歌搜索来到这里，由于问题标题滚动正文
2021-03-14 18:10:12
你好@infensus 你能给我一个这个原因的工作示例吗？我使用 var section2=$('#section-2'); $('html,body').animate({scrollTop: section2.offset().top});
2021-03-28 18:10:12
看起来不错 - 你确定第 2 部分存在吗？做 console.log(section2.length); 并确保它不是 0。稍后会举一个例子。
2021-03-31 18:10:12
为什么$('html,body')？他只需要在特定的容器中。接受的答案对我来说更好。我有类似问题的案例，您的回答对我不起作用。
2021-03-31 18:10:12

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

window.scrollTo(0, $("#element").offset().top);
对于应该如此简单的事情，我已经在网上的其他解决方案上花费了很长时间，但是这个简单的衬里正是我所需要的。
2021-03-24 18:10:12
需要注意的是，这种方式适用于整个窗口。如果您想滚动溢出的内容：scroll 那么这将不起作用。
2021-03-29 18:10:12

我自己设法做到了。不需要任何插件。查看我的要点：

// 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);
});
你的单行要点，加上动画，正是我所需要的。谢谢！
2021-03-14 18:10:12
我提到除了 jquery 库引用之外，您不需要添加引用。加上 jquery 是一种行业标准。你为什么不使用它？如果没有 jquery，这可能是完全可行的，但它仍然需要有人为解析部分编写大量代码。感觉适得其反。编写一个完整的插件只是为了滚动到一个糟糕的 div 感觉适得其反。
2021-03-19 18:10:12
No need for any plugins?? 但是你使用jQuery！它是一个巨大的库，甚至不是一个插件。
2021-04-04 18:10:12

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

例如 

row_5.scrollIntoView();
如何动画？
2021-03-19 18:10:12
无需动画。当您使用 scrollIntoView() 时，控件将自动滚动以使其显示在视图中。
2021-03-24 18:10:12
其它你可能感兴趣的问题
上一篇CommonJs module系统中“module.exports”和“exports”的区别 下一篇使用 jQuery 和 CSS 将数字转换为星级显示