jQuery平滑滚动到不同页面上的ID选择器

Question

我在一个页面上有一个链接(东阿比林，德克萨斯州(，我希望能够单击它并让它平滑地滚动到它链接到的新页面上的特定 ID(#facility 页表(。我正在尝试使用 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)

这是带有 hrefs 的 html 代码，我想点击并让他们滚动他们链接到的页面上的 #facility 页表(新页面上确实存在(。

<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>

Answer 1

很简单。 只需在存在该特定div的页面上使用此代码即可

$(document).ready(function(){
$('html, body').animate({
scrollTop: $("#mainDiv").offset().top
}, 3000);
});

每当您进入此页面时，该页面都会滚动到该特定div