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

Question

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

http://jsfiddle.net/k63t7tqo/3/

显然我需要在这里把一些代码，所以这里是从小提琴的HTML：

$('.direction-right').click(function() { 
 
    var margin = $('.navbar-nav').css('margin-top'); 
 
    console.log(margin); 
 
    console.log('-' + ($('.navbar-nav').height() - 50) + 'px'); 
 
    $('.navbar-nav').css('margin-top', margin == '-' + ($('.navbar-nav').height() - 50) + 'px' ? margin : '-=50px'); 
 
}); 
 

 
$('.direction-left').click(function() { 
 
    var margin = $('.navbar-nav').css('margin-top'); 
 
    $('.navbar-nav').css('margin-top', margin == '0px' ? '0px' : '+=50px'); 
 
}); 
 

 
$(window).resize(function() { 
 
    if ($(window).width() < 768) { 
 
     \t $('.navbar-nav').css('margin-top', 0); 
 
    } 
 
});

@media (max-width: 768px) { 
 
    .direction-right, .direction-left { 
 
     display: none; 
 
    }  
 
} 
 
@media (min-width: 768px) { 
 
    .navbar { 
 
     height: 51px; 
 
     overflow: hidden; 
 
    } 
 
    .navbar-nav { 
 
     overflow: hidden; 
 
     width: calc(100% - 52px); 
 
    } 
 
    
 
    .direction-right, .direction-left { 
 
     display: block; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="navbar navbar-default navbar-fixed-top"> 
 
     <div class="container"> 
 
      
 
     <div class="navbar-header pull-left">  
 
     </div> 
 
     <div class="navbar-header pull-right"> 
 
      <button type="button" class="navbar-toggle" 
 
        data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 
      
 
     <div class="navbar-collapse collapse"> 
 
      <a href="#" class="direction-left pull-left navbar-brand"><</a> 
 
      <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> 
 
      <a href="#" class="direction-right pull-left navbar-brand">></a> 
 
     </div> 
 
    </div> 
 
    </div>

我遇到的问题是即：

A）当我点击左右箭头时，导航栏本身移动向上和向下翻页，甚至与其他单词/内容重叠。 B）导航栏与我正在进行的基本蓝色Bootstrap主题不匹配。

问题B我最有可能弄清楚自己，但我不能为我的生活找出为什么导航栏上下移动而不是左右滚动到原位。预先感谢您的帮助。这个网站很棒，你的人很棒。

编辑：我想值得注意的是我使用Bootstrap with DataTables和LESS，而不仅仅是一个基本页面。

Answer 1

它跳回页面顶部的原因是因为您使用的是JQuery单击事件，并且标签#是一个锚点标签，它告诉浏览器在单击页面时回滚到页面的顶部。我认为解决这个问题最简单的方法就是将右箭头和左箭头更改为span标记，这样锚链接就不会被调用，并且当用户浏览页面时，页面不会跳转。

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

这是您的JS.Fiddle updated with the new code。希望有所帮助。