Javascript 移动切换导航和滚动顶部

再见

我最近在一个单页面站点中实现了一个响应性导航栏，但我有一个小错误正在努力解决

我想做什么 从移动导航中，滚动至页面上的定位点

我所做的 我将包含相关的代码片段

HTML 滚动到锚定JavaScript 菜单JavaScript 结果 正如我所说的，scroll to anchor在桌面和平板电脑版本的导航上运行得很好，但那是在JavaScript发挥作用之前。在移动版本中，当我单击要滚动到的菜单项时，它会在页面上向下滚动过锚定

---

我还应该提到，当我从移动导航中单击菜单项时，导航会折叠然后滚动，因此我不确定问题是否存在于var destination=$elementClicked.offset.top；当导航崩溃并因此滚动过锚时，是一个不同的值？

最终自己解决了这个问题，事实上，问题是在单击导航项目后菜单崩溃

我删除了此代码，现在可以正常工作了：

// document click to hide the menu
// http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/comment-page-2/#comment-438918
document.onclick = function(e) {
    var mobileButton = document.getElementById('menutoggle'),
        buttonStyle =  mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;

    if(buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
        changeClass(mobileButton, 'navtoogle active', 'navtoogle');
    }
}

请加一把小提琴

<script>
    $(document).ready(function() {

        // Smooth scroll to anchor
        $('nav a').click(function(e) {
            var elementClicked = $(this).attr("href");
            var destination = $(elementClicked).offset().top;

            e.preventDefault();
            $("html,body").animate({ scrollTop: destination-15}, 1000);
        });

    });
</script> 

//  The function to change the class
var changeClass = function (r,className1,className2) {
    var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
    if( regex.test(r.className) ) {
        r.className = r.className.replace(regex,' '+className2+' ');
    }
    else{
        r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
    }
    return r.className;
};  

//  Creating our button for smaller screens
var menuElements = document.getElementById('menu');
menuElements.insertAdjacentHTML('afterBegin','<button type="button" id="menutoggle" class="navtoogle" aria-hidden="true"><i aria-hidden="true" class="icon-menu"> </i> Menu</button>');

//  Toggle the class on click to show / hide the menu
document.getElementById('menutoggle').onclick = function() {
    changeClass(this, 'navtoogle active', 'navtoogle');
}

// document click to hide the menu
// http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/comment-page-2/#comment-438918
document.onclick = function(e) {
    var mobileButton = document.getElementById('menutoggle'),
        buttonStyle =  mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;

    if(buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
        changeClass(mobileButton, 'navtoogle active', 'navtoogle');
    }
}

// document click to hide the menu
// http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/comment-page-2/#comment-438918
document.onclick = function(e) {
    var mobileButton = document.getElementById('menutoggle'),
        buttonStyle =  mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;

    if(buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
        changeClass(mobileButton, 'navtoogle active', 'navtoogle');
    }
}