JavaScript在Chrome中不能在Firefox中使用

Question

我有一個可在Chrome（41.0.2272.89）中工作的導航欄，但不能在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 -->

使用一個簡單的onclick，它將激活我的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);
}}

看來JS可以在Chrome中激活，但不能在Firefox中激活。

應該發生的是，當您單擊一個項目時，網站將向下滾動到該項目。 這曾經可以正常工作，但是現在突然之間可以再工作了。

這里的例子

Answer 1

由於其自己的Window.scrollTo（）函數，scrollTo必須為保留字。

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);
}}

因此，更改函數名稱將返回正常功能。

Answer 2

在我看來，您的onclick定義有問題。

代替：

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

嘗試在DIV名稱周圍使用單引號，例如：

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

這也將需要對功能代碼進行一些調整，以處理傳遞DIV的名稱而不是對象的名稱。