1

I'm attempting to do a scroll to link from another html page; when you click the link, page will change (if applicable) and will scroll from top to the ID section.

It's bizarre that it works great on my local machine but doesn't quite work right once pushed lived.

Most of the site is on a single page but when you visit the Stylist's 'View Bio' pages and then use one of the nav links you'll see the issue.

Go to this page and then click any nav link to see... http://davehudson.me/livegallery/v8/stylist-cheryl.html

Contrast that with how it should work when you use nav links on the homepage... http://davehudson.me/livegallery/v8/

Here is my JS in the head for the scroll to functionality 

(function($){


var jump=function(e)
{
   if (e){
       e.preventDefault();
       var target = $(this).attr("href");
   }else{
       var target = location.hash;
   }

   $('html,body').animate(
   {
       scrollTop: $(target).offset().top - 100
   },1000,function()
   {
       location.hash = target;
   });

}

$('html, body').hide();

$(document).ready(function()
{
    $('a[href^=#]').bind("click", jump);

    if (location.hash){
        setTimeout(function(){
            $('html, body').scrollTop(0).show()
            jump()
        }, 0);
    }else{
      $('html, body').show()
    }
});

})(jQuery)

Any help would be greatly appreciated - thank you for reading!

EDIT

When I add a 2000ms delay to setTimeout it works, but the perceived performance is terrible.

This also only seems to be a problem in Chrome.

I tried adding CSS heights to every container div to see if a slowly loading DOM was providing a wrong offset value, for the anchor link to scroll down to; doesn't seem to have any effect though.

davehudson52
  • 13
  • 5

0 Answers0