Javascript 如何使用 jQuery 滚动到特定项目？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2905867/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to scroll to specific item using jQuery?
提问by Misha Moroshko
I have a big table with vertical scroll bar. I would like to scroll to a specific line in this table using jQuery/Javascript.
我有一个带有垂直滚动条的大桌子。我想使用 jQuery/Javascript 滚动到此表中的特定行。
Are there built-in methods to do this?
是否有内置方法可以做到这一点？
Here is a little example to play with.
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>回答by James
Dead simple. No plugins needed.
死的简单。无需插件。
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()
});?
Here is a working example.
这是一个工作示例。
回答by Dominic
I realise this doesn't answer scrolling in a container but people are finding it useful so:
我意识到这并不能解决在容器中滚动的问题，但人们发现它很有用，因此：
$('html,body').animate({scrollTop: some_element.offset().top});
We select both html and body because the document scroller could be on either and it is hard to determine which. For modern browsers you can get away with $(document.body).
我们同时选择 html 和 body，因为文档滚动条可能位于其中之一，并且很难确定哪个。对于现代浏览器，您可以使用$(document.body).
Or, to go to the top of the page:
或者，转到页面顶部：
$('html,body').animate({scrollTop: 0});
Or without animation:
或者没有动画：
$(window).scrollTop(some_element.offset().top);
OR...
或者...
window.scrollTo(0, some_element.offset().top); // native equivalent (x, y)
回答by Fredrik Stolpe
I agree with Kevin and others, using a plugin for this is pointless.
我同意 Kevin 和其他人的观点，为此使用插件毫无意义。
window.scrollTo(0, $("#element").offset().top);
回答by lorddarq
I managed to do it myself. No need for any plugins. Check out my 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);
});
回答by nickf
You can use the the jQuery scrollTo pluginplugin:
您可以使用jQuery scrollTo 插件插件：
$('div').scrollTo('#row_8');
回答by Tamilarasi
You can use scrollIntoView()method in javascript.
just give id.scrollIntoView();
您可以scrollIntoView()在 javascript 中使用方法。就给id.scrollIntoView();
For example
例如
row_5.scrollIntoView();
回答by basti500
Scroll element to center of container
将元素滚动到容器的中心
To bring the element to the center of the container.
将元素带到容器的中心。
JS
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
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
css
.container {
height: 60px;
overflow-y: scroll;
width 60px;
background-color: white;
}
It is not exact to the center but you will not recognice it on larger bigger elements.
它不精确到中心，但您不会在更大的更大元素上识别它。
回答by MD Ashik
You can scroll by jQueryand JavaScriptJust need two element jQuery and this JavaScript code :
您可以通过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>回答by Nlinscott
I did a combination of what others have posted. Its simple and smooth
我结合了其他人发布的内容。它简单流畅
$('#myButton').click(function(){
$('html, body').animate({
scrollTop: $('#scroll-to-this-element').position().top },
1000
);
});
回答by hashchange
Contrary to what most people here are suggesting, I'd recommend you douse a plugin if you want to animate the move. Just animating scrollTop is not enough for a smooth user experience. See my answer herefor the reasoning.
相反的是这里大多数人所提出的建议，我建议你做，如果你想动画移动使用插件。仅仅为 scrollTop 设置动画还不足以获得流畅的用户体验。请参阅我的答案here以了解推理。
I have tried a number of plugins over the years, but eventually written one myself. You might want to give it a spin: jQuery.scrollable. Using that, the scroll action becomes
这些年来我尝试了许多插件，但最终还是自己写了一个。您可能想试一试：jQuery.scrollable。使用它，滚动动作变成
$container.scrollTo( targetPosition );
But that's not all. We need to fix the target position, too. The calculation you see in other answers,
但这还不是全部。我们也需要固定目标位置。您在其他答案中看到的计算，
$target.offset().top - $container.offset().top + $container.scrollTop()
mostlyworks but is not entirely correct. It doesn't handle the border of the scroll container properly. The target element is scrolled upwards too far, by the size of the border. Here is a demo.
大多有效，但并不完全正确。它没有正确处理滚动容器的边框。目标元素向上滚动了边框的大小。这是一个演示。
Hence, a better way to calculate the target position is
因此，计算目标位置的更好方法是
var target = $target[0],
container = $container[0];
targetPosition = $container.scrollTop() + target.getBoundingClientRect().top - container.getBoundingClientRect().top - container.clientTop;
Again, have a look at the demoto see it in action.
再次查看演示以了解它的实际效果。
For a function which returns the target position and works for both window and non-window scroll containers, feel free to use this gist. The comments in there explain how the position is calculated.
对于返回目标位置并适用于窗口和非窗口滚动容器的函数，请随意使用这个 gist。那里的评论解释了如何计算位置。
In the beginning, I have said it would be best to use a plugin for animatedscrolling. You don't need a plugin, however, if you want to jump to the target without a transition. See the answer by @Jamesfor that, but make sure you calculate the target position correctly if there is a border around the container.
一开始，我说过最好使用插件进行动画滚动。但是，如果您想在没有过渡的情况下跳转到目标，则不需要插件。请参阅@James的答案，但如果容器周围有边框，请确保正确计算目标位置。
