preventDefault, Scrollen bei Firefox

Question

Ich habe dieses Skript in jQuery, es scrollt zu gewünschten Abschnitt, aber mit Abstand nach oben. Es funktioniert gut auf allen getesteten Browsern ... außer Firefox.

$('nav > *').click(function(event){ 
    event.preventDefault(); 
    var navClicked = $(this).index(); 
    var elem = $(this).attr("href"); 
    $('body').scrollTop($(elem).offset().top - 48); 
}); 

https://jsfiddle.net/5L3xyuuv/1/

Answer 1

Hier ist diese versuchen, fügen Sie HTML und BODY-scrollTop() Verfahren, das funktioniert perfekt auf allen Browser.

$('nav > *').click(function(event){ 
 
    event.preventDefault(); 
 
    var navClicked = $(this).index(); 
 
    var elem = $(this).attr("href"); 
 
    $('html,body').scrollTop($(elem).offset().top - 48); 
 
});

nav { 
 
    width: 100%; 
 
    height: 48px; 
 
    background-color: red; 
 
    position: fixed; 
 
    top:0; 
 
} 
 

 
#about{ 
 
    width:400px; 
 
    height:400px; 
 
    background:#111; 
 
} 
 

 
#benefits{ 
 
    width:400px; 
 
    height:400px; 
 
    background:#ccc; 
 
} 
 

 
#team{ 
 
    width:400px; 
 
    height:400px; 
 
    background:#f22; 
 
} 
 

 
#path{ 
 
    width:400px; 
 
    height:400px; 
 
    background:#f2f; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <a href="#about">about</a> 
 
    <a href="#benefits">benefits</a> 
 
    <a href="#team">team</a> 
 
    <a href="#path">path</a> 
 
</nav> 
 

 
<div id="about"></div> 
 
<div id="benefits"></div> 
 
<div id="team"></div> 
 
<div id="path"></div>

Answer 2

$ (document) .scrollTop (...); löst das Problem.