Question

我正在使用此代码在锚链接上滚动。它工作一次，如果再次单击锚点它不起作用。

$("#erly").on("click", function() {
    $(".table-responsive").scrollLeft(0);
});
$("#late").on("click", function() {
    $(".table-responsive").scrollLeft(50);
});

Answer 1

您可以尝试取消绑定以前的事件处理程序，如下所示。

＆＃13;

           $("#erly").unbind().on("click", function() {
             $(".table-responsive").scrollLeft(0);
           });

           $("#late").unbind().on("click", function() {
             $(".table-responsive").scrollLeft(50);
           });

＆＃13;

  div.table-responsive {
    background: #ccc none repeat scroll 0 0;
    border: 3px solid #666;
    margin: 5px;
    padding: 5px;
    position: relative;
    width: 200px;
    height: 100px;
    overflow: auto;
  }
  p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
    width: 1000px;
    height: 1000px;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body>
  <a id="erly" href="#1">Early</a>
  <br />
  <a id="late" href="#2">Late</a>

  <div class="table-responsive">
    <h1>lalala</h1>
    <p>Hello 1</p>
  </div>
  <div class="table-responsive">
    <h1>lalala</h1>
    <p>Hello 2</p>
  </div>
</body>

＆＃13;

Answer 2

<div class="col-xs-12 early_late">
<ul class="list-inline">
    <li class="pull-left">
        <a id="erly" class="erlier" onclick="scrollWin2()"> 
        <span class="glyphicon glyphicon-menu-left span_left"></span> Earlier</a>
    </li>
    <li class="pull-right"  onclick="scrollWin()">
        <a id="late">Late <span class="glyphicon glyphicon-menu-right span_right"></span></a>
    </li>
</ul>

function scrollWin() {
    document.getElementById('scroll').scrollBy(100 , 0);
}
function scrollWin2() {
    document.getElementById('scroll').scrollBy(-100 , 0);
}

平滑滚动按钮单击

2 个答案: