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>

It is complaining about 'a[href*="#"]' part of your code I guess. — Yogesh Ghimire, Oct 12 '18 at 16:35
Looks like your `href` contains a "/" that messes up your jQuery selector. — showdev, Oct 12 '18 at 16:39
This `$('a[href*="#"]')` is not the problem. See the jQuery docs and look around your page for something else. https://api.jquery.com/attribute-contains-selector/ — TJBlackman, Oct 12 '18 at 16:43
The "scrolling" script needs to exist on the destination page. See [How to disable anchor jump when loading a page](https://stackoverflow.com/questions/27096621/how-to-disable-anchor-jump-when-loading-a-page). [Here's an example](http://next.plnkr.co/edit/SSl59g5R9R96X72k?open=lib%2Fscript.js&preview). — showdev, Oct 12 '18 at 16:48
The scrolling function is in the main.js and should load on every page — Jo White, Oct 12 '18 at 16:52
You're preventing the link from being followed with `preventDefault()`, so it won't load the new page. Instead, I suggest performing the scroll when `location.hash` exists. — showdev, Oct 12 '18 at 16:54
I guess I don't understand because I'm getting that same errors and the links are still broken — Jo White, Oct 12 '18 at 16:59
Where are you getting stuck? Did you see the post I linked and my example? Did you modify your code? What do you have now? — showdev, Oct 12 '18 at 17:03
That question is about having the browser not scroll to an anchor and I want the opposite I want it to scroll down to #facility-page-table — Jo White, Oct 12 '18 at 17:06
You need to prevent the browser from natively jumping to the anchor so that you can scroll to it with jQuery. — showdev, Oct 12 '18 at 17:07
Here's another similar method: [Smooth scroll to anchor after loading new page](https://stackoverflow.com/questions/30293784/smooth-scroll-to-anchor-after-loading-new-page). — showdev, Oct 12 '18 at 17:11
you don't need a forward slash before your hash in your hrefs. — Joe Fitzsimmons, Oct 12 '18 at 17:21
I added that code to replace my other code but I get the same error. All of their snippets/examples are for elements on the same page which works fine for me. What I am trying to do is link to another page and when that page loads it scrolls to the selector however when I try to add the hashes in the links it breaks the links and says unrecognized expression — Jo White, Oct 12 '18 at 17:22
When I remove the forward before the href it throws the same error (Uncaught Error: Syntax error, unrecognized expression: self-storage/provo-ut/#facility-page-table) so I guess it's just something I'm doing wrong I need to figure out — Jo White, Oct 12 '18 at 17:23
Here is a staging version of the site if you want to look at the error yourself http://staging.turnkeystorage.com/self-storage/sizing/ — Jo White, Oct 12 '18 at 17:24
I'm confused. On that page, you still have `preventDefault()` and you are still using the entire `href` for the anchor. — showdev, Oct 12 '18 at 17:47

score -1 · Accepted Answer · answered Oct 12 '18 at 17:35

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

jQuery smooth scroll to id selector on different page

1 Answers1