平滑滾動按鈕單擊
[英]Smooth Scroll On Button Click
問題描述
我正在使用此代碼在錨鏈接上滾動。 它可以工作一次，如果再次單擊錨點，將無法工作。
$("#erly").on("click", function() {
$(".table-responsive").scrollLeft(0);
});
$("#late").on("click", function() {
$(".table-responsive").scrollLeft(50);
});
2 個解決方案
解決方案1
0 2016-06-24 02:56:59
您可以像這樣嘗試解除對先前事件處理程序的綁定。
$("#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>
解決方案2
0 2016-06-24 06:13:30
<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);
}
單擊按鈕時平滑滾動：不適用於我，但在代碼段中效果很好
[英]Smooth scroll on button click: Not working for me but works great in the Code Snippet
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.