1

I have a navigation menu that is targeting anchors that are positioned by the data-position attribute within a page. I'm using this code snippet to make this work, and it works great in Safari and Chrome, but isn't working at all in Firefox. Is there a way to fix this? Thanks in advance for any assistance you can offer!

$(document).on('click','.navigation a', function(event){
    event.preventDefault();
    var $target = $( $(this).attr('href') );
    var position = $target.data('position');
    $('body').scrollTop( position * scrollHeight );
});
Pete
  • 57,112
  • 28
  • 117
  • 166
user2390342
  • 33
  • 4

1 Answers1

1

Try changing your selector to 

$('html, body')

Firefox overflow is applied at the html level by default. So your line of code would be

$('html, body').scrollTop( position * scrollHeight );

This question might help you as well.

Community
  • 1
  • 1
Blake Plumb
  • 6,779
  • 3
  • 33
  • 54
  • Any insight as to how I can animate the scrolling between links? To make the scrolling slower? Here's a link to my test page for reference: http://intercross.com/newsitebuild/index-final.html – user2390342 May 16 '13 at 19:47
  • 1
    `$('html, body').animate({scrollTop: position * scrollHeight}, 'slow');` – Blake Plumb May 16 '13 at 20:04
  • is it possible to have each targeted div have 0 opacity until scrolled to their respective data-position where they would then be at 100%? thank you for your help – user2390342 May 20 '13 at 21:29
  • I would recommend starting a new question for that. – Blake Plumb May 21 '13 at 14:06
  • hmm... I don't have Safari 6 to test on, but it is working fine in Safari 5. Safari overflow is applied to the `body` level not the `html` level so this should work. Maybe this [question](http://stackoverflow.com/questions/13219640/body-scrolltop-doesnt-update-in-safari) might help. Don't know what to say sorry :( – Blake Plumb May 21 '13 at 17:22