如何使用 jquery 滚动到页面上的特定位置？

是否可以使用 jQuery 滚动到页面上的特定位置？

我想要滚动的位置必须有:

<a name="#123">here</a>

或者只是移动到特定的 DOM ID？

284440 次浏览
小开

是的，即使用普通的 JavaScript 也很容易。你给一个元素一个 id，然后你可以用它作为“书签”:

<div id="here">here</div>

如果你想让它在用户点击链接时滚动到那里，你可以使用经过实践检验的方法:

<a href="#here">scroll to over there</a>

若要以编程方式执行此操作，请使用 scrollIntoView()

document.getElementById("here").scrollIntoView()
小开

下面是一个纯 javascript 版本:

location.hash = '#123';

它会自动滚动。 记住添加“ #”前缀。

小开

JQuery 滚动插件

因为这是一个带有 Jquery标签的问题，我不得不说，这个库有一个非常好的平滑滚动插件，你可以在这里找到它: Http://plugins.jquery.com/scrollto/

文件摘录:

$('div.pane').scrollTo(...);//all divs w/class pane

或者

$.scrollTo(...);//the plugin will take care of this

用于滚动的自定义 jQuery 函数

您可以通过定义自定义滚动 jquery 函数来使用非常 轻量级的方法

$.fn.scrollView = function () {
return this.each(function () {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 1000);
});
}

然后像这样使用它:

$('#your-div').scrollView();

滚动到页面坐标

使用 scrollTop或 scrollLeft属性动画 html和 body元素

$('html, body').animate({
scrollTop: 0,
scrollLeft: 300
}, 1000);

普通的 javascript

使用 window.scroll滚动

window.scroll(horizontalOffset, verticalOffset);

总之，使用 window.location.hash 跳转到 ID 为元素

window.location.hash = '#your-page-element';

直接在 HTML 中(可访问性增强)

<a href="#your-page-element">Jump to ID</a>


<div id="your-page-element">
will jump here
</div>
小开

没有必要使用任何插件，你可以这样做:

var divPosition = $('#divId').offset();

然后使用这个将文档滚动到特定的 DOM:

$('html, body').animate({scrollTop: divPosition.top}, "slow");
小开 
<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>

这个示例显示如何定位到特定的 div id，即本例中的“ idVal”。如果您有后续的将通过 ajax 在这个页面中打开的 div/table，那么您可以分配唯一的 div 并调用脚本来滚动到 div 的每个内容的特定位置。

希望这个有用。

小开

普通 Javascript:

window.location = "#elementId"
小开 
<script type="text/javascript">
$(document).ready(function(){
$(".scroll-element").click(function(){
$('html,body').animate({
scrollTop: $('.our_companies').offset().top
}, 1000);


return false;
});
})
</script>

小开

这里是@Juraj-blahunka 的 轻量级的方法的变体。这个函数不假设容器是文档，只有当项目不在视图中时才会滚动。动画队列也被禁用，以避免不必要的弹跳。

$.fn.scrollToView = function () {
return $.each(this, function () {
if ($(this).position().top < 0 ||
$(this).position().top + $(this).height() > $(this).parent().height()) {
$(this).parent().animate({
scrollTop: $(this).parent().scrollTop() + $(this).position().top
}, {
duration: 300,
queue: false
});
}
});
};
小开

试试这个

<div id="divRegister"></div>


$(document).ready(function() {
location.hash = "divRegister";
});
小开

使用 jquery.easing.min.js，带有固定的 IE 控制台错误

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

您可以使用 scroll-behavior: smooth;在不使用 Javascript 的情况下完成这项工作

Https://developer.mozilla.org/en-us/docs/web/css/scroll-behavior


提交答案