2016-06-24 3 views
0

나는이 코드를 사용하여 앵커 링크를 스크롤합니다. 한 번 작동하고 앵커를 다시 클릭하면 작동하지 않습니다.부드러운 스크롤 버튼 클릭

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

당신은 더 나은 더 기쁘게 질문을 정교 또는 일부 코드를 게시 할 우려 –

+0

을 이해하기 위해, 당신의 HTML과 CSS를 게시하시기 바랍니다 수 있습니다. !! –

답변

0

이전 이벤트 처리기의 바인딩을 해제 할 수 있습니다.

  $("#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>

+0

문제가 계속 발생하지 않습니다. –

+0

나는 그저 작동하는 예제를 정리했습니다. 이것이 필요한 것인지 확실하지 않습니다. –

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