jquery点击功能元素在div内部滚动而不是html，body

Question

我list内的div元素组很少。这个div是可滚动的。我有很少的链接元素来指定列表组。如果此特定链接上的用户click，则div将scroll show，top div上的scrollTop特定列表组。

常规function html, body几乎正常工作。主要问题是定位列表组定位div而不是父.language-list-alph $(function(){ $('.quick-lang-shorting .shorting-list li a').on('click', function(e){ e.preventDefault(); var target = this.hash; var $target = $(target); $('.language-list-alph').stop().animate({'scrollTop': $target.offset().top}, 1200); }); });。

  

小部件在下面。

＆＃13;

＆＃13;

*:after,
*:before{
  content: '';
  display: table;
}
*:after{
  clear: both;
}
*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body{
  margin: 0;
  padding: 100px 30px 30px;
}
.translation-lang,
.quick-lang-shorting{
  display: block;
  float: left;
  min-height: 1px;
}
.translation-lang{
  width: -webkit-calc(100% - 50px);
  width: -moz-calc(100% - 50px);
  width: calc(100% - 50px);
}
.language-list-alph{
  display: block;
  height: 600px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 17px;
  width: 100%;
}
.lang-list-group{
  list-style: inside none;
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0;
}
.lang-list-group li{
  border-bottom: 1px solid #121212;
  padding: 10px 15px;
}
.quick-lang-shorting{
  width: 50px;
}
.shorting-list{
  list-style: inside none;
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0;
}
.shorting-list li{
  float: left;
  text-align: right;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="translation-lang">
  <div class="language-list-alph">
    <ul class="lang-list-group" id="lang_list_group_a">
      <li>
        <span>Argentina</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_b">
      <li>
        <span>Belgium</span>
      </li>
      <li>
        <span>Brasil</span>
      </li>
      <li>
        <span>Bulgaria</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_c">
      <li>
        <span>Canada</span>
      </li>
      <li>
        <span>China</span>
      </li>
      <li>
        <span>Ivory Coast</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_d">
      <li>
        <span>Denmark</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_e">
      <li>
        <span>Estonia</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_f">
      <li>
        <span>France</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_g">
      <li>
        <span>Greece</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_h">
      <li>
        <span>Hungary</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_i">
      <li>
        <span>India</span>
      </li>
      <li>
        <span>Ireland</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_j">
      <li>
        <span>Ireland</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_k">
      <li>
        <span>Argentina</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_l">
      <li>
        <span>Argentina</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_m">
      <li>
        <span>Argentina</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_n">
      <li>
        <span>Argentina</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_o">
      <li>
        <span>Argentina</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_p">
      <li>
        <span>Argentina</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_q">
      <li>
        <span>Argentina</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_r">
      <li>
        <span>Argentina</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_s">
      <li>
        <span>Argentina</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_t">
      <li>
        <span>Argentina</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_u">
      <li>
        <span>Argentina</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_v">
      <li>
        <span>Argentina</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_w">
      <li>
        <span>Argentina</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_x">
      <li>
        <span>Argentina</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_y">
      <li>
        <span>Argentina</span>
      </li>
    </ul><!-- Language list group -->
    <ul class="lang-list-group" id="lang_list_group_z">
      <li>
        <span>Argentina</span>
      </li>
    </ul><!-- Language list group -->
  </div><!-- Language list by alpha -->
</div><!-- Translation language -->
<div class="quick-lang-shorting">
  <ul class="shorting-list">
    <li><a href="#lang_list_group_a">A</a></li>
    <li><a href="#lang_list_group_b">B</a></li>
    <li><a href="#lang_list_group_c">C</a></li>
    <li><a href="#lang_list_group_d">D</a></li>
    <li><a href="#lang_list_group_e">E</a></li>
    <li><a href="#lang_list_group_f">F</a></li>
    <li><a href="#lang_list_group_g">G</a></li>
    <li><a href="#lang_list_group_h">H</a></li>
    <li><a href="#lang_list_group_i">I</a></li>
    <li><a href="#">J</a></li>
    <li><a href="#">K</a></li>
    <li><a href="#">L</a></li>
    <li><a href="#">M</a></li>
    <li><a href="#">N</a></li>
    <li><a href="#">O</a></li>
    <li><a href="#">P</a></li>
    <li><a href="#">Q</a></li>
    <li><a href="#">R</a></li>
    <li><a href="#">S</a></li>
    <li><a href="#">T</a></li>
    <li><a href="#">U</a></li>
    <li><a href="#">V</a></li>
    <li><a href="#">W</a></li>
    <li><a href="#">X</a></li>
    <li><a href="#">Y</a></li>
    <li><a href="#">Z</a></li>
  </ul>
</div><!-- Quick lang shorting -->

＆＃13;

div

＆＃13;

＆＃13;

＆＃13;

如何定位.language-list-alph（html, body）而不是.home{ background-image:url("https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg"); background-repeat: no-repeat; backgroud-size: cover; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; } .hero-text{ font-size:32px; text-align: center; } .btn-hero{ font-size:20px; background:transparent; border:2px solid #282828; border-radius:28px; padding:10px 30px; }？

  

如果有人想编辑这个问题，我们将不胜感激。