jQuery smooth scroll to id selector on different page

Question

I have a link on one page ( East Abilene, Tx ) and I want to be able to click it and have it smooth scroll to the specific id (#facility-page-table) on the new page it is linking to. I'm trying to do this with jQuery and this is what I have so far but it keeps throwing errors.

jQuery(function($) {
    $('a[href*="#"]').on('click', function (e) {
        e.preventDefault();

        $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
        }, 500, 'linear');
    });
});

Here is the error log:

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)

Here is the html code with the hrefs that I want to click on and have them scroll the the #facility-page-table on the page they link to (which does exist on the new page).

<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

It's simple. just use this code on that page on which that specific div is present

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

and whenever you will go on this page the page will be scrolled to that specific div