jQuery scrolling not working in mozilla browsers

**Zany90** · May 9, 2013 14:44

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 :/

The script is shown below:

Code:

$(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

**peterjonson82** · May 9, 2013 21:35

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

**chris.upjohn** · May 9, 2013 21:38

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.

**paul_wilkins** · May 9, 2013 22:24

Originally Posted by Zany90

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

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.

**Zany90** · May 10, 2013 11:57

Thanks guys! thats it working now by animating the html aswell

now it just seems that all the spacing is totally messed up in opera but im wondering if its really even worth worrying about

**paul_wilkins** · May 10, 2013 19:51

Originally Posted by Zany90

now it just seems that all the spacing is totally messed up in opera but im wondering if its really even worth worrying about

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

User Tag List

Thread: jQuery scrolling not working in mozilla browsers

Thread Tools

Display

jQuery scrolling not working in mozilla browsers

Bookmarks

Bookmarks

Posting Permissions