jQuery scrollLeftを1つのdivに使用すると、全体ページが上にスクロールする

Question

divを持ちたいと思います。このdivの外のリンクをクリックすると、横にスクロールできます。 （1つは左スクロール用、もう1つは右スクロール用）。

jQuery animateとscrollLeftを使用しました。すべてうまく見えますが、問題があるだけです。divを使ってスクロールするリンクをクリックすると、ページ全体がスクロールされます。私はここでいくつかの似たような話題を見つけましたが、私の問題（または私の問題に適用できるもの）に私が適用できる解決策はありません。

これは私の最初の質問です。 #へhrefの設定によるものです:-)

おかげ

function move_right() { 
 
    var current = $('.thumbnail-scroll').scrollLeft(); 
 
    var maximal = document.getElementById("thumbnail-scroll").scrollWidth; 
 
    var visible = document.getElementById("thumbnail-scroll").offsetWidth; 
 
    var move; 
 

 
    if ((current + visible) < maximal) { 
 
     $('.thumbnail-scroll').animate({ 
 
      scrollLeft: '+=' + 470 
 
     }, 1000); 
 
    } 
 
} 
 

 
function move_left() { 
 
    var current = $('.thumbnail-scroll').scrollLeft(); 
 

 
    if (current > 0) { 
 
     $('.thumbnail-scroll').animate({ 
 
      scrollLeft: '-=' + 470 
 
     }, 1000); 
 
    } 
 
}

.thumbnail-scroll { 
 
     height: 150px; 
 
     overflow-x: auto; 
 
     white-space: nowrap; 
 
     overflow:hidden; 
 
     background-color: #cc33ff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style=" background-color: #6666ff; line-height: 230px;"> 
 
     <div> some content </div> 
 
     <div> some content </div> 
 
     <div> some content </div> 
 
     </div> 
 
     <div style=" display: flex; "> 
 
     <div class="move-left" style="width: 150px; line-height: 145px; padding-right: 10px;"> 
 
      <a onclick="move_left()" href="#"> 
 
      <span> LEFT </span> 
 
      </a> 
 
     </div> 
 
     <div class="thumbnail-scroll" id="thumbnail-scroll"> 
 
      <span> some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content </span> 
 
     </div> 
 
     <div class="move-right" style="width: 150px; line-height: 145px; padding-left: 10px;"> 
 
      <a href="#" onclick="move_right()"> 
 
      <span> RIGHT </span> 
 
      </a> 
 
     </div> 
 
     </div>

Answer 1

。ハッシュリンク（はページに見つかりません）をクリックすると、通常の動作になります。

属性を削除するだけで問題が解決されます。 D 答えてくれてありがとう：

function move_right() { 
 
    var current = $('.thumbnail-scroll').scrollLeft(); 
 
    var maximal = document.getElementById("thumbnail-scroll").scrollWidth; 
 
    var visible = document.getElementById("thumbnail-scroll").offsetWidth; 
 
    var move; 
 

 
    if ((current + visible) < maximal) { 
 

 

 
     $('.thumbnail-scroll').animate({ 
 
      scrollLeft: '+=' + 470 
 
     }, 1000); 
 

 
    } 
 
} 
 

 

 

 
function move_left() { 
 
    var current = $('.thumbnail-scroll').scrollLeft(); 
 

 

 
    if (current > 0) { 
 

 

 
     $('.thumbnail-scroll').animate({ 
 
      scrollLeft: '-=' + 470 
 
     }, 1000); 
 

 
    } 
 
}

.thumbnail-scroll { 
 
     height: 150px; 
 
     overflow-x: auto; 
 
     white-space: nowrap; 
 
     overflow:hidden; 
 
     background-color: #cc33ff; 
 
     } 
 

 
a[onclick]{cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style=" background-color: #6666ff; line-height: 230px;"> 
 
     <div> some content </div> 
 
     <div> some content </div> 
 
     <div> some content </div> 
 
     </div> 
 
     <div style=" display: flex; "> 
 
     <div class="move-left" style="width: 150px; line-height: 145px; padding-right: 10px;"> 
 
      <a onclick="move_left()"> 
 
      <span> LEFT </span> 
 
      </a> 
 
     </div> 
 
     <div class="thumbnail-scroll" id="thumbnail-scroll"> 
 
      <span> some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content </span> 
 
     </div> 
 
     <div class="move-right" style="width: 150px; line-height: 145px; padding-left: 10px;"> 
 
      <a onclick="move_right()"> 
 
      <span> RIGHT </span> 
 
      </a> 
 
     </div> 
 
     </div>