JavaScript works in Chrome not in Firefox

Question

I have a navbar that works in Chrome(41.0.2272.89) but not in Firefox(36.0.1).

HTML

    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li  class="active"><a class="navBtn" onclick="scrollTo(home)" title="#home">Home</a></li>
        <li><a class="navBtn" onclick="scrollTo(about)" title="#about">About</a></li>
        <li><a class="navBtn" onclick="scrollTo(clients)" title="#clients">Clients</a></li>
        <li><a class="navBtn" onclick="scrollTo(portfolio)" title="#portfolio">Portfolio</a></li>
        <li><a class="navBtn" onclick="scrollTo(contact)" title="#contact">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->

Using a simple onclick, it will activate my JS

JS

function scrollTo(element) {
if(element == document.getElementById('home')) {
    $('html, body').animate({
        scrollTop: $(element).offset().top - 54
    }, 500);
} else {
    $('html, body').animate({
        scrollTop: $(element).offset().top - 53 
    }, 500);
}}

It seem the JS activates in Chrome but not in Firefox.

What is supposed to happen is that when you click a item, the site will scroll down to it. This used to work fine, but now it suddenly now longer works.

Example HERE

This question looks similar. Maybe these answers have your solution . http://stackoverflow.com/questions/8149155/animate-scrolltop-not-working-in-firefox — mikeLspohn, Mar 15 '15 at 03:18
Also, if you're using jQuery why use the inline onclick handlers. You could just call the .click or .on('click' , .....) jQuery method. — mikeLspohn, Mar 15 '15 at 03:33
@mikeLspohn, afraid it doesn't help. I'm already using 'html, body' as mentioned in that answer. — Michael, Mar 15 '15 at 04:10

Michael · Accepted Answer · 2015-03-16T03:04:37.960

scrollTo must be a reserved word due to their own Window.scrollTo() function.

function moveTo(element) {
if(element == document.getElementById("home")) {
    $("html, body").animate({
        scrollTop: $(element).offset().top - 54
    }, 500);
} else {
    $("html, body").animate({
        scrollTop: $(element).offset().top - 53 
    }, 500);
}}

So changing the function name returned normal functionality.

score 0 · Answer 2 · answered Mar 15 '15 at 03:30

0

Seems to me your onclick definitions are faulty.

Instead of:

<li><a class="navBtn" onclick="scrollTo(about)" title="#about">About</a></li>

Try using single quotes around the DIV names like:

<li><a class="navBtn" onclick="scrollTo('about')" title="#about">About</a></li>

This will also require some adjustments to the function code as well to handle passing the name of the DIV instead of the object.

answered Mar 15 '15 at 03:30

Dave H.

1
1

they do function, as they work in Chrome. It's just Firefox not wanting to play ball. – Michael Mar 15 '15 at 04:14

JavaScript works in Chrome not in Firefox

2 Answers2