Mobile Toggle Nav和scrollTop

Question

G＆＃39;日

！

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

我想做什么

在移动导航栏中，滚动到页面上的锚点。

我做了什么

我包含了相关的代码片段。

HTML

<nav id="menu" class="nav" role="navigation">
    <ul>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

<section>
     <h2 id="projects">Latest Work.</h2>
     <p>Content here...</p>
</section>

ScrollTo Anchor JavaScript

<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> 

菜单JavaScript

//  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');
    }
}

结果

正如我所说，滚动到锚点在这个导航的桌面和平板电脑版本上运行得很漂亮（但这是在JavaScript发挥作用之前）。在单击菜单项以滚动到的移动版本中，它会在页面上向下滚过锚点。

我还应该提一下，当我点击移动导航中的菜单项时，导航会折叠然后滚动，所以我不确定当导航器崩溃时问题是否在var destination = $(elementClicked).offset().top;内是不同的值因此滚过锚点？

Answer 1

结束了解决这个问题，问题实际上是点击导航项后菜单崩溃。

我删除了此代码，现在它按预期工作：

// 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');
    }
}