Question

我有一个切换菜单按钮，使用JS来打开/关闭。直到最近，我才注意到，如果我在远离页面顶部的菜单上切换，它也可以作为一个返回顶部的功能，它立即将我带到页面的顶部。不确定为什么它是因为我是一个完整的JS菜鸟。如果有人能帮忙解决这个问题，我将非常感激。

    <!--HTML MARKUP-->
    <header class="menu">
        <a href="#" onclick="toggle_visibility('drop-menu-content');">
            <div id="drop-menu">
                <i class="fa fa-bars"></i>
            </div>
        </a>
            <ul id="drop-menu-content">
            </ul> 
    </header>

    <!--Javascript Below-->
    <script>
    function toggle_visibility(id) {
        var e = document.getElementById(id);
        if(e.style.display == 'block')
        e.style.display = 'none';
        else
        e.style.display = 'block';
    }
    </script>

谢谢！

Answer 1

此处不涉及任何链接，因此请将<a>替换为<button>并删除href="#"。

Answer 2

a标记中哈希网址的默认行为是将浏览器窗口滚动到页面上由哈希指定id的元素。例如，如果您的ID为＆＃34; my-element＆＃34;，请单击带有a的{{1}}元素，将浏览器窗口滚动到该元素。如果有url只是哈希值，浏览器会将其解释为页面顶部。

为了防止这种情况，您可以使用@ danielnixon的建议并使用按钮替换href="#my-element"，~~您可以完全删除a属性然后重新设置样式具有href的元素，因为非链接pointer: cursor标记具有默认光标~~，或者您可以更新Click事件处理程序以使用如下所示的函数：

调用function toggleMenu(ev) { ev.preventDefault(); toggle_visibility('drop-menu-content'); }会阻止浏览器对事件执行其默认行为，在这种情况下是将窗口滚动到文档的顶部。

修改：如果您要使用preventDefault()元素，请不要删除href属性。谢谢，@ danielnixon

JS Toggle Menu作为返回顶部按钮？

2 个答案: