0

I'm adding a feature to a WordPress page and I'm stumped.

This page: http://www.cherishresearch.org/about/team/ has four sections, each with an ID (#ca, #cp, etc.). I would like a URL entered into the browser to load the page directly at the appropriate section, so http://www.cherishresearch.org/about/team/#cp loads with the Pilot Grant Recipients section at the top of the page. This should work automatically, but the page ends up loading at the correct position for about a second, then jumps up to a random spot at the top of the page. I've tried writing some Javascript in an attempt to correct the issue, and it works locally, but not on the live site.

Each section set up like this:

<div class="team-breadcrumb" id="cp">
    <h3>Pilot Grant Recipients</h3>
        <div class="row">
         <!-- Content -->

Here is my javascript:

var hash = window.location.hash.substring(1);    

if (hash == 'ci')  {
    var top = document.getElementById('ci').offsetTop;
    window.scrollTo(0, top);
} 
if (hash == 'cs') {
    var top = document.getElementById('cs').offsetTop;
    window.scrollTo(0, top);
} 
if (hash == 'cp') {
    var top = document.getElementById('cp').offsetTop;
    window.scrollTo(0, top);
} 
if (hash == 'ca') {
    var top = document.getElementById('ca').offsetTop;
    window.scrollTo(0, top);
}

I have tried this within both $(document).ready(); and $(window).load(); I've tried window.location.assign() using the full URL with anchor link. I have no idea what's malfunctioning. Any thoughts?

John M.
  • 11
  • 4
  • 3
    You shouldn't need any JS for this, just entering a URL with the `#ca` part at the end should just jump straight to the relevant element because of standard URL `#` navigation. Is there any other JS on the page, perhaps setting the focus to something at the top of the page, or...? – nnnnnn Oct 19 '17 at 02:12
  • The page loads "normally" at first because your page loads **5MB of data** via _49 requests_. It takes a while for that to load, _then_ your JS runs, and "jumps" to the anchor. Some of your headshots are larger than a meg all by themselves (http://www.cherishresearch.org/wp-content/uploads/2016/12/WCMFacultyHeadshotsJan24-PhilipJeng-10324-1-e1491400169765.jpg). Improve your performance / load time, even if you don't use JS to "jump" to the anchor... – random_user_name Oct 19 '17 at 02:17
  • @nnnnnn Sorry, I should have added that this functionality wasn't working initially, so I'm adding JS to try and correct the faulty behavior. Clearly it's having no effect. I couldn't see any unclosed tags in the HTML or anything unusual. Re: loadtime; fair enough. I recently started working on this site after a previous developer. – John M. Oct 19 '17 at 02:50

0 Answers0