나는이 코드를 사용하여 앵커 링크를 스크롤합니다. 한 번 작동하고 앵커를 다시 클릭하면 작동하지 않습니다.부드러운 스크롤 버튼 클릭
$("#erly").on("click", function() {
$(".table-responsive").scrollLeft(0);
});
$("#late").on("click", function() {
$(".table-responsive").scrollLeft(50);
});
나는이 코드를 사용하여 앵커 링크를 스크롤합니다. 한 번 작동하고 앵커를 다시 클릭하면 작동하지 않습니다.부드러운 스크롤 버튼 클릭
$("#erly").on("click", function() {
$(".table-responsive").scrollLeft(0);
});
$("#late").on("click", function() {
$(".table-responsive").scrollLeft(50);
});
이전 이벤트 처리기의 바인딩을 해제 할 수 있습니다.
$("#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>
문제가 계속 발생하지 않습니다. –
나는 그저 작동하는 예제를 정리했습니다. 이것이 필요한 것인지 확실하지 않습니다. –
<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);
}
당신은 더 나은 더 기쁘게 질문을 정교 또는 일부 코드를 게시 할 우려 –
을 이해하기 위해, 당신의 HTML과 CSS를 게시하시기 바랍니다 수 있습니다. !! –