如何使用 jquery 滚动到页面上的特定位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1586341/
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 can I scroll to a specific location on the page using jquery?
提问by mrblah
Is it possible to scroll to a specific location on the page using jQuery?
是否可以使用 jQuery 滚动到页面上的特定位置？
Does the location I want to scroll to have to have:
我要滚动的位置是否必须具有：
<a name="#123">here</a>
Or can it just move to a specific DOM id?
或者它可以移动到特定的 DOM id 吗？
回答by Juraj Blahunka
jQuery Scroll Plugin
jQuery 滚动插件
since this is a question tagged with jqueryi have to say, that this library has a very nice plugin for smooth scrolling, you can find it here: http://plugins.jquery.com/scrollTo/
因为这是一个用jquery标记的问题，我不得不说，这个库有一个非常好的平滑滚动插件，你可以在这里找到它：http: //plugins.jquery.com/scrollTo/
Excerpts from Documentation:
文档摘录：
$('div.pane').scrollTo(...);//all divs w/class pane
or
或者
$.scrollTo(...);//the plugin will take care of this
Custom jQuery function for scrolling
用于滚动的自定义 jQuery 函数
you can use a very lightweight approachby defining your custom scroll jquery function
您可以通过定义自定义滚动 jquery 函数来使用非常轻量级的方法
$.fn.scrollView = function () {
return this.each(function () {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 1000);
});
}
and use it like:
并使用它：
$('#your-div').scrollView();
Scroll to a page coordinates
滚动到页面坐标
Animate htmland bodyelements with scrollTopor scrollLeftattributes
带有或属性的动画html和body元素scrollTopscrollLeft
$('html, body').animate({
scrollTop: 0,
scrollLeft: 300
}, 1000);
Plain javascript
纯javascript
scrolling with window.scroll
滚动 window.scroll
window.scroll(horizontalOffset, verticalOffset);
only to sum up, use the window.location.hash to jump to element with ID
总结一下，使用window.location.hash跳转到带ID的元素
window.location.hash = '#your-page-element';
Directly in HTML (accesibility enhancements)
直接在 HTML 中（可访问性增强）
<a href="#your-page-element">Jump to ID</a>
<div id="your-page-element">
will jump here
</div>
回答by nickf
Yep, even in plain JavaScript it's pretty easy. You give an element an id and then you can use that as a "bookmark":
是的，即使在纯 JavaScript 中也很容易。你给一个元素一个 id，然后你可以将它用作“书签”：
<div id="here">here</div>
If you want it to scroll there when a user clicks a link, you can just use the tried-and-true method:
如果您希望它在用户单击链接时滚动到那里，您可以使用久经考验的方法：
<a href="#here">scroll to over there</a>
To do it programmatically, use scrollIntoView()
要以编程方式执行此操作，请使用 scrollIntoView()
document.getElementById("here").scrollIntoView()
回答by Meghdad Hadidi
There is no need to use any plugin, you can do it like this:
不需要使用任何插件，你可以这样做：
var divPosition = $('#divId').offset();
then use this to scroll document to specific DOM:
然后使用它来滚动文档到特定的 DOM：
$('html, body').animate({scrollTop: divPosition.top}, "slow");
回答by o.k.w
Here's a pure javascript version:
这是一个纯 javascript 版本：
location.hash = '#123';
It'll scroll automatically. Remember to add the "#" prefix.
它会自动滚动。请记住添加“#”前缀。
回答by Luiz Pican?o
Plain Javascript:
纯Javascript：
window.location = "#elementId"
回答by user2793243
<div id="idVal">
<!--div content goes here-->
</div>
...
<script type="text/javascript">
$(document).ready(function(){
var divLoc = $('#idVal').offset();
$('html, body').animate({scrollTop: divLoc.top}, "slow");
});
</script>
This example shows to locate to a particular div id i.e, 'idVal' in this case. If you have subsequent divs/tables that will open up in this page via ajax, then you can assign unique divs and call the script to scroll to the particular location for each contents of divs.
此示例显示定位到特定的 div id，即在本例中的“idVal”。如果您有后续的 div/tables 将通过 ajax 在此页面中打开，那么您可以分配唯一的 div 并调用脚本以滚动到 div 的每个内容的特定位置。
Hope this will be useful.
希望这将是有用的。
回答by Yogesh Rathod
<script type="text/javascript">
$(document).ready(function(){
$(".scroll-element").click(function(){
$('html,body').animate({
scrollTop: $('.our_companies').offset().top
}, 1000);
return false;
});
})
</script>
回答by Ajay-Systematix
Try this
尝试这个
<div id="divRegister"></div>
$(document).ready(function() {
location.hash = "divRegister";
});
回答by Super Model
Using jquery.easing.min.js, With fixed IE console Errors
使用 jquery.easing.min.js，修复 IE 控制台错误
Html
html
<a class="page-scroll" href="#features">Features</a>
<section id="features" class="features-section">Features Section</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
Jquery
查询
//jQuery to collapse the navbar on scroll, you can use this code with in external file with name scrolling-nav.js
$(window).scroll(function () {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function () {
$('a.page-scroll').bind('click', function (event) {
var anchor = $(this);
if ($(anchor).length > 0) {
var href = $(anchor).attr('href');
if ($(href.substring(href.indexOf('#'))).length > 0) {
$('html, body').stop().animate({
scrollTop: $(href.substring(href.indexOf('#'))).offset().top
}, 1500, 'easeInOutExpo');
}
else {
window.location = href;
}
}
event.preventDefault();
});
});
回答by Sairam
You can use scroll-behavior: smooth;to get this done without Javascript
您可以scroll-behavior: smooth;在没有 Javascript 的情况下完成此操作
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
