我正在使用此jQuery小代码进行平滑滚动。 滚动应该在距顶部70像素处停止,并且滚动在同一页面上进行。 但是,如果我在其他页面上,并且单击指向其他页面上ID的哈希的链接,滚动不会停留在大约70px的位置上,而是停留在顶部。 如何避免呢? ...
提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供 中文繁体 英文版本 中英对照 版本,有任何建议请联系yoyou2525@163.com。
我在一页上有一个链接( East Abilene,Tx ),我希望能够单击它并将其平滑滚动到要链接到的新页面上的特定ID(#facility-page-table)。 我正在尝试使用jQuery,这是我到目前为止所拥有的,但是它始终会引发错误。
jQuery(function($) {
$('a[href*="#"]').on('click', function (e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500, 'linear');
});
});
这是错误日志:
jquery.js?ver=1.12.4:2 Uncaught Error: Syntax error, unrecognized expression: /#state-locations
at Function.fa.error (jquery.js?ver=1.12.4:2)
at fa.tokenize (jquery.js?ver=1.12.4:2)
at fa.select (jquery.js?ver=1.12.4:2)
at Function.fa (jquery.js?ver=1.12.4:2)
at Function.a.find (jquery-migrate.min.js?ver=1.4.1:2)
at n.fn.init.find (jquery.js?ver=1.12.4:2)
at n.fn.init.a.fn.find (jquery-migrate.min.js?ver=1.4.1:2)
at a.fn.init.n.fn.init (jquery.js?ver=1.12.4:2)
at new a.fn.init (jquery-migrate.min.js?ver=1.4.1:2)
at n (jquery.js?ver=1.12.4:2)
这是带有我想要单击的href的html代码,并让他们在链接到的页面上滚动#facility-page-table(在新页面上确实存在)。
<div class="form-group">
<div class="moving-supplies-locations-list">
<div class="state-name" id="utah">
<h2>Utah</h2>
<ul>
<li><i class="fa fa-map-marker" aria-hidden="true"></i> <a href="/self-storage/provo-ut/#facility-page-table"> Provo, Ut</a></li>
</ul>
</div>
<div class="state-name" id="texas">
<h2>Texas</h2>
<ul>
<li><i class="fa fa-map-marker" aria-hidden="true"></i> <a role="button432-978-4561" href="/self-storage/midland-tx/#facility-page-table"> Midland, Tx</a></li>
<li><i class="fa fa-map-marker" aria-hidden="true"></i> <a href="/self-storage/abilene-tx/north-abilene/#facility-page-table"> North 1st Abilene, Tx</a></li>
<li><i class="fa fa-map-marker" aria-hidden="true"></i> <a href="/self-storage/abilene-tx/east-abilene/#facility-page-table"> East Abilene, Tx</a></li>
<li><i class="fa fa-map-marker" aria-hidden="true"></i> <a href="/self-storage/abilene-tx/south-abilene/#facility-page-table"> South 41st Abilene, Tx</a></li>
<li><i class="fa fa-map-marker" aria-hidden="true"></i> <a href="/self-storage/wichita-falls-tx/#facility-page-table"> Wichita Falls, Tx</a></li>
</ul>
</div>
<div class="state-name" id="ohio">
<h2>Ohio</h2>
<ul>
<li><i class="fa fa-map-marker" aria-hidden="true"></i> <a href="/self-storage/dayton-oh/#facility-page-table"> Dayton, Oh</a></li>
</ul>
</div>
</div>
</div>
这很简单。 只需在存在特定div
页面上使用此代码
$(document).ready(function(){
$('html, body').animate({
scrollTop: $("#mainDiv").offset().top
}, 3000);
});
每当您进入该页面时,页面就会滚动到该特定div
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.