Javascript 水平滚动导航栏工作不正常

我最近被链接到一篇文章，解释了如何添加一个导航栏，可以向右或向左滚动以显示更多选项卡。完整的JSFIDLE是：

显然，我需要在这里输入一些代码，下面是来自fiddle的HTML：

$“.右方向”。单击函数{ var margin=$'.navbar nav'.css'margin-top'； 1.logmargin； console.log'-'+$'.navbar nav'.height-50+'px'； $'.navbar nav'.css'margin-top'，margin='-'+$'.navbar nav'.height-50+'px'？margin:'-=50px'； }; $“.左方向”。单击函数{ var margin=$'.navbar nav'.css'margin-top'； $'.navbar nav'.css'margin-top'，margin='0px'？'0px'：'+=50px'； }; $window.resizefunction{ 如果$window.width<768{ $'.navbar nav'.css'margin-top'，0； } }; @介质最大宽度：768px{ .方向右，.方向左{ 显示：无； } } @介质最小宽度：768px{ navbar先生{ 高度：51px； 溢出：隐藏； } .导航栏导航{ 溢出：隐藏； 宽度：calc100%-52px； } .方向右，.方向左{ 显示：块； } }

---

它跳回页面顶部的原因是因为您正在使用JQuery单击事件，而hashtag是一个锚定标记，它告诉浏览器在单击时滚动回页面顶部。我认为解决这个问题最简单的方法是改变左右箭头来跨越标签，这样当用户浏览你的页面时，锚链接就不会被调用，你的页面也不会跳转

    <span class="direction-left pull-left navbar-brand"><</span>
    <ul class="nav navbar-nav">
        <li><a href="1.html">Menu 1</a></li>
        <li><a href="2.html">Menu 2</a></li>
        <li><a href="3.html">Menu 3</a></li>
        <li><a href="4.html">Menu 4</a></li>
        <li><a href="5.html">Menu 5</a></li>
        <li><a href="6.html">Menu 6</a></li>
        <li><a href="7.html">Menu 7</a></li>
        <li><a href="8.html">Menu 8</a></li>
        <li><a href="9.html">Menu 9</a></li>
        <li><a href="10.html">Menu 10</a></li>
        <li><a href="11.html">Menu 11</a></li>
        <li><a href="12.html">Menu 12</a></li>
    </ul>
    <span class="direction-right pull-left navbar-brand">></span>

---

这是你的护照。希望这能有所帮助。

请在您的帖子中加入您的CSS和JS。小提琴可能会褪色，这将使你的问题对未来的用户毫无用处。继续，并将你的代码从小提琴添加到网站上的一个片段中。为您添加所有代码，并提供一个有效的代码片段，用于回答您的问题：对不起，我不知道。谢谢你的编辑使用您提供的JS.Fiddle示例，我在页面中添加了一个大容器，并使其使用bootstrap，该示例似乎工作正常，减去一些可以更正的样式设置。我会将你的代码与此进行比较，看看发生了什么。嗯@crazymatt我不确定问题出在哪里。我的页面中也有一个容器和一个DataTable，但由于某些原因，箭头使导航栏简单地向上移动页面。有什么想法吗？不幸的是，同样的问题仍然存在注意：箭头从一个链接变为可以点击，当您将光标悬停在箭头上时，文本会高亮显示。单击左箭头或右箭头只会升高或降低页面上的导航栏位置。由于我工作的机密性，我认为我不能链接整个代码页面，否则可能会有所帮助。呃..还有一件事要提的是，我的导航栏不在页面的顶部，而是在中上部，已经在一些部分导航栏和一个主导航栏下面。啊，好的。是的，如果不查看所有代码，将很难帮助您。听起来你的网站上还有其他可能导致问题的因素。如果您可以在js.fiddle中复制该问题，我或其他人可能会帮助您解决。