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

Question

我在一页上有一个链接（ 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>

Answer 1

这很简单。 只需在存在特定div页面上使用此代码

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

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