简体   繁体   中英

JavaScript works in Chrome not in Firefox

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

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.

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM