平滑滾動不工作，只能在Chrome開發工具中切換設備

Question

我有一個垂直導航欄，可以在手機上使用.on（click，function）和.slideToggle（）jQuery方法打開和關閉，但在平板電腦上變爲水平和桌面。導航欄包含定位在同一頁面內的元素的定位元素。同時，我想用animate（）方法添加一個jQuery click（）函數，以在點擊鏈接時創建一個平滑滾動條。 這是我的問題。我在JsBin中編碼，當我想要在輸出視圖（默認桌面大小）中看到結果時，平滑滾動不起作用。然後，我打開Chrome開發人員工具並切換到設備工具欄內的移動視圖，導航欄切換和平滑滾動完美。切換回桌面大小，平滑滾動突然也能正常工作。關閉Chrome開發工具，平滑滾動完美。可能導致平滑滾動的問題在第一次嘗試時不起作用？

首先我試着分開這兩個功能，這次導航欄無法在手機上打開，但平板電腦和桌面上的平滑滾動效果很好。第二次將click（）和animate（）函數嵌入到負責切換的.on（click，function）中，如代碼中所示。我在Chrome和Mozilla Firefox中也經歷過這種情況。

/* function to toggle the navigation bar 
 
and make the scroll of links smooth */ 
 

 
function contentHide() { 
 
    $('.toggle-button').on('click', function() { 
 
    $('.nav').slideToggle(300); 
 

 
    var $root = $('html, body'); 
 
    $('a').click(function() { 
 
     $root.animate({ 
 
     scrollTop: $($.attr(this, 'href')).offset().top 
 
     }, 900); 
 
     return false; 
 
    }); 
 

 
    }); 
 
} 
 

 
$(document).ready(contentHide);

.nav { 
 
    display: none; 
 
} 
 

 
@media (min-width: 768px) { 
 

 
    .nav { 
 
    display: block; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<navbar> 
 
     <img class="logo" src="https://github.com/AnikoBorosova/Exercise-Flexbox-festival-website/blob/master/logo_placeholder.png?raw=true" alt="logo"> 
 
     <a class="toggle-button"><i class="fa fa-bars fa-2x" aria-hidden="true"></i></a> 
 
     <div class="nav"> 
 
     <a href="#C1">Home</a> 
 
     <a href="#C2">About us</a> 
 
     <a href="#C3">Program</a> 
 
     <a href="#C4">Partners</a> 
 
     <a href="#C5">Contact</a> 
 
     </div> 
 
    </navbar>

這裏是jsBin鏈接到我的整個代碼：https://jsbin.com/zoximog/24/edit?html,css,js 提前感謝！

Answer 1

你可以使用很好的滾動https://alvarotrigo.com/fullPage/ 它會幫助你軟滾動到特定頁面。