滚动条上的锚点突出显示在Firefox中不起作用

Question

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

滚动上的锚点高亮

它在Chrome浏览器中工作正常，但在Firefox中无法正常工作。

基于这篇文章Animate scrollTop在firefox中不起作用 ，我将$（“ body”）。animate更改为$（“ html，body”）。animate，现在滚动条可以工作了，但是我不知道为什么活动链接会赢不行

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