Question

我从这篇文章中复制了工作解决方案代码：

它适用于Chrome，但不适用于Firefox。

根据这篇文章Animate scrollTop not working in firefox，我将$（＆＃34; body＆＃34;）。动画更改为$（＆＃34; html，body＆＃34;）。动画，现在滚动工作但我无法弄清楚为什么活动链接无法正常工作。

HTML

<section id="1">1</section>
<section id="2">2</section>
<section id="3">3</section>
<section id="4">4</section>

<div id="menu">
<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
<a href="#4">4</a>
</div>

的jQuery

var timerid; //Used to fire scroll function once after scrolling is done.
$(document).ready(function(){
    $("#menu a").click(function(e){
        e.preventDefault();
        $("#menu a").removeClass('active');
    var id = $(this).attr("href").substring(1);
    $("html,body").animate({
        'scrollTop': $("section#" + id).offset().top
    });        
});
$("body").scrollTop(1); //forcing window scroll to execute on page load
$(window).scroll(function(){
    clearTimeout(timerid);
    timerid = setTimeout(checkactivelink, 50);
});

function checkactivelink()
{
    $("section").each(function(){
        if($("body").scrollTop() >= $(this).offset().top)
        {
            $("#menu a").removeClass('active');
                $("#menu a[href=#" + $(this).attr("id") + "]").addClass('active');
        }
    });
  }
});

Answer 1

使用$(window).scrollTop()代替$(body).scrollTop()，因为它受到广泛支持。看看firefox中的这个小提琴是否正常工作：https://jsfiddle.net/vdpm674z/1/

function checkactivelink() {
    $("section").each(function(){ 
        if($(window).scrollTop() >= $(this).offset().top) {
          $("#menu a").removeClass('active');
          $("#menu a[href=#" + $(this).attr("id") + "]").addClass('active');
        }
    });
}

滚动突出显示滚动无法在Firefox中工作

1 个答案: