滾動條上的錨點突出顯示在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');
        }
    });
}