jQuery scrolling not working in mozilla browsers

JavaScript
1

Hi,

Ive recently been working on a new site at http://www.jonathanwallace.co.uk/

The site uses a jQuery script to scroll from one section to the next - it works 100% fine in safari and chrome, but for some reason doesn’t work in firefox or opera - im pretty sure it doesn’t work in IE either :confused:

The script is shown below:


$(document).ready(function() {
  $('.navhome').mouseenter(function () {
    $(this).css('color', '#000');
    $('header img').css('opacity', '1');
  });
  $('.navhome').mouseleave(function() {
    $(this).css('color', '#999');
    $('header img').css('opacity', '0.5');
  });
  $('header img').mouseenter(function () {
    $('.navhome').css('color', '#000');
  });
  $('header img').mouseleave(function() {
    $('.navhome').css('color', '#999');
  });
  $('.navhome').click(function() {
    $("body").animate({ scrollTop: $("#about").position().top }, 'slow');
  });
  $('.navfeatured').click(function() {
    $("body").animate({ scrollTop: $("#featured").position().top }, 'slow');
  });

  $('#navblog').click(function() {
    $("body").animate({ scrollTop: $("#blog").position().top }, 'slow');
  });

  $('.navcontact').click(function() {
    $("body").animate({ scrollTop: $("#contact").position().top }, 'slow');
  });

  $('.top').click(function() {
    $("body").animate({ scrollTop: $("#home").position().top }, 'slow');
  });
});

Does anyone know what might be stopping this from working in the mentioned browsers?

Thanks

2

Hey Zany90, I checked it on all browser it’s working properly without any issues. Check your browsers version it could be the problem.

3

Firefox is a little weird in this area as you need to animate both the <html> and <head> elements, typically animating only the <html> element is sufficient but I personally prefer to animate both of them.

4

For some browsers body is the answer, for others html is the solution. You should be able to safely animate ‘body,html’ to resolve that difference.

5

Thanks guys! thats it working now by animating the html aswell :slight_smile: now it just seems that all the spacing is totally messed up in opera but im wondering if its really even worth worrying about

6

I think that that is something that the CSS forum should be able to help you with.