preventDefault，在Firefox上滾動

我在jQuery中使用了這個腳本，它滾動到想要的部分，但是間隔到頂部。它可以在所有測試過的瀏覽器上正常工作......除了Firefox。preventDefault，在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/

來源

2016-07-24 Patrick Hellebrand

也可以添加您的html代碼或創建一個jsfiddle。 – frnt

@frnt https://jsfiddle.net/5L3xyuuv/1/ –

什麼樣的測試頁是？它幾乎是空的，並且不會重現問題 – vsync

這裏試試這個，添加HTML和BODY到scrollTop()方法，這完美的作品在所有的瀏覽器。

$('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>

來源

2016-07-24 15:24:44 frnt

你的代碼段工作正常，但如果生病將它複製到我的代碼段，它會停止工作 –

我無法在控制檯中發現任何錯誤。 – frnt

難道是，其他jQuery腳本導致這種情況，但只在Firefox上？ –

的$（document）.scrollTop（...）; 解決了這個問題。

來源

2016-07-24 16:03:30

preventDefault，在Firefox上滾動

回答

相關問題