平滑滚动按钮单击

Question

I am using this code for scroll on an anchor link. 我正在使用此代码在锚链接上滚动。 It works one time and if click on anchor again it is not working. 它可以工作一次，如果再次单击锚点，将无法工作。

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

Answer 1

You may try unbinding the previous event handlers, like this. 您可以像这样尝试解除对先前事件处理程序的绑定。

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

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

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

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 个解决方案

解决方案1
0 2016-06-24 02:56:59

解决方案2
0 2016-06-24 06:13:30

平滑滚动按钮单击

问题描述

2 个解决方案

解决方案1 0 2016-06-24 02:56:59

解决方案2 0 2016-06-24 06:13:30

解决方案1
0 2016-06-24 02:56:59

解决方案2
0 2016-06-24 06:13:30