2016-06-24 2 views
0

Я использую этот код для прокрутки на якорной ссылке. Он работает один раз, и если снова нажать на якорь, он не работает.Smooth Scroll On Button Нажмите

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

пожалуйста, вы можете опубликовать HTML и CSS, чтобы лучше понять вашу озабоченность –

+0

Может порадовать более усложняются ваш вопрос или отправить код. !! –

ответ

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