如何删除自动滚动到div id：target？

时间：2015-12-31 10:53:07

标签： javascript jquery html css accordion

我的手风琴菜单仅使用html和css，但按钮由:target ID组成。当我按下任何按钮时，是否有javascript可以删除自动滚动？它徘徊在锚#id。

stackoverflow 上有很多相关的答案，但没有一个对我有帮助，请不要仅仅提出任何其他问题作为答案。

#aconmine {
  margin: 0px auto;
  width: 90% !important;
  box-shadow: 0 0 5px black;
  border: solid 3px white;
}

.aconmineli {
  list-style: none;
  border: 1px 1px 1px 1px #efefef solid;
  background-color: #2A5581;
  display: block
}

.aconmineli h2 {
  margin: 0;
  padding: 10px;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  color: #ecf0f1;
  border-bottom: 1px #efefef solid;
  background: #1D3D5F;
  background-image: url("http://p315468.for-test-only.ru/wp-content/uploads/2014/09/down.png");
  background-position: right 20px center;
  background-repeat: no-repeat;
  background-size: 30px auto;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.59);
}

.aconminecontent {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.73s ease-out, opacity 0.7s ease 0.3s, padding-bottom 1s ease;
  -moz-transition: max-height 0.73s ease-out, opacity 0.7s ease 0.3s, padding-bottom 1s ease;
  -ms-transition: max-height 0.7s ease-out, opacity 0.7s ease 0.3s, padding-bottom .5s ease;
  /* IE10 is actually unprefixed */
  -o-transition: max-height 0.7s ease-out, opacity 0.7s ease 0.3s, padding-bottom .5s ease;
  transition: max-height 0.7s ease-out, opacity 0.7s ease 0.3s, padding .5s ease;
  opacity: 0;
}

.aconminecontent:target {
  max-height: 1000px !important;
  border-bottom: 1px solid #EFEFEF;
  overflow: visible !important;
  opacity: 1;
  margin-top: -220px;
  padding: 200px 20px 20px 20px;
}

.aconminecontent:target .closeme {
  background-image: url("http://p315468.for-test-only.ru/wp-content/uploads/2014/09/up.png");
  background-position: right;
  background-repeat: no-repeat;
  background-size: 30px auto;
}

.aconminecontent p {
  padding: 10px;
  color: #ecf0f1;
  margin-top: -47px;
}

.closeme {
  height: 43px;
  width: 100%;
  display: block;
  transform: translate(0, -23px);
}

.aconmineli a {
  transition: height .2s ease-in-out;
  height: 43px;
  border-bottom-left-radius: : 10px;
  text-decoration: none;
}

.aconmineli a:hover {
  height: 49px !important;
  display: block !important;
  opacity: 1
}
<br><br><br><br><br><br><br><br><br><br>
<div id="aconmine">
  <div class="aconmineli"><a href="#tab1"><h2>Пальтовая группа </h2></a>
    <div id="tab1" class="aconminecontent">
      <a href="#tabcloseme" class="closeme"></a>
      <br><br><br><br><br><br><br><br><br><br>
    </div>
  </div>
  <div class="aconmineli"><a href="#tab2"><h2>Костюмная группа </h2></a>
    <div id="tab2" class="aconminecontent">
      <a href="#tabcloseme" class="closeme"></a>
      <br><br><br><br><br><br><br><br><br><br>
    </div>
  </div>
  <div class="aconmineli"><a href="#tab3"><h2>Плательная группа </h2></a>
    <div id="tab3" class="aconminecontent">
      <a href="#tabcloseme" class="closeme"></a>
      <br><br><br><br><br><br><br><br><br><br>
    </div>
  </div>
  <div class="aconmineli"><a href="#tab4"><h2>Спортивные изделия </h2></a>
    <div id="tab4" class="aconminecontent">
      <a href="#tabcloseme" class="closeme"></a>
      <br><br><br><br><br><br><br><br><br><br>
    </div>
  </div>
  <div class="aconmineli"><a href="#tab5"><h2>Текстильно-трикотажные изделия</h2></a>
    <div id="tab5" class="aconminecontent">
      <a href="#tabcloseme" class="closeme"></a>
      <br><br><br><br><br><br><br><br><br><br>
    </div>
  </div>
  <div class="aconmineli"><a href="#tab6"><h2>Изделия из Кожи и Замши </h2></a>
    <div id="tab6" class="aconminecontent">
      <a href="#tabcloseme" class="closeme"></a>
      <br><br><br><br><br><br><br><br><br><br>
    </div>
  </div>
  <div class="aconmineli"><a href="#tab7"><h2>Изделия из Натурального Меха </h2></a>
    <div id="tab7" class="aconminecontent">
      <a href="#tabcloseme" class="closeme"></a>
      <br><br><br><br><br><br><br><br><br><br>
    </div>
  </div>
  <div style="position: fixed; top: 0px;"></div>
</div>
<br><br><br><br><br><br><br><br><br><br>

以下是我手风琴jsfiddle的演示。

1 个答案:

答案 0 :(得分：1)

这是解决方案。解释在代码中 - 相关代码行的每个注释。

$('a').click(function(event) {
  event.preventDefault();
  // https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY
  // store the scrollY before the browser scroll to the :target
  var scrollTop = window.scrollY;
  // manually change the hash
  location.hash = $(this).attr('href');
  // scroll back to scrollTop
  window.scrollTo(0, scrollTop);
});
#aconmine {
  margin: 0px auto;
  width: 90% !important;
  box-shadow: 0 0 5px black;
  border: solid 3px white;
}

.aconmineli {
  list-style: none;
  border: 1px 1px 1px 1px #efefef solid;
  background-color: #2A5581;
  display: block
}

.aconmineli h2 {
  margin: 0;
  padding: 10px;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  color: #ecf0f1;
  border-bottom: 1px #efefef solid;
  background: #1D3D5F;
  background-image: url("http://p315468.for-test-only.ru/wp-content/uploads/2014/09/down.png");
  background-position: right 20px center;
  background-repeat: no-repeat;
  background-size: 30px auto;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.59);
}

.aconminecontent {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.73s ease-out, opacity 0.7s ease 0.3s, padding-bottom 1s ease;
  -moz-transition: max-height 0.73s ease-out, opacity 0.7s ease 0.3s, padding-bottom 1s ease;
  -ms-transition: max-height 0.7s ease-out, opacity 0.7s ease 0.3s, padding-bottom .5s ease;
  /* IE10 is actually unprefixed */
  -o-transition: max-height 0.7s ease-out, opacity 0.7s ease 0.3s, padding-bottom .5s ease;
  transition: max-height 0.7s ease-out, opacity 0.7s ease 0.3s, padding .5s ease;
  opacity: 0;
}

.aconminecontent:target {
  max-height: 1000px !important;
  border-bottom: 1px solid #EFEFEF;
  overflow: visible !important;
  opacity: 1;
  margin-top: -220px;
  padding: 200px 20px 20px 20px;
}

.aconminecontent:target .closeme {
  background-image: url("http://p315468.for-test-only.ru/wp-content/uploads/2014/09/up.png");
  background-position: right;
  background-repeat: no-repeat;
  background-size: 30px auto;
}

.aconminecontent p {
  padding: 10px;
  color: #ecf0f1;
  margin-top: -47px;
}

.closeme {
  height: 43px;
  width: 100%;
  display: block;
  transform: translate(0, -23px);
}

.aconmineli a {
  transition: height .2s ease-in-out;
  height: 43px;
  border-bottom-left-radius: : 10px;
  text-decoration: none;
}

.aconmineli a:hover {
  height: 49px !important;
  display: block !important;
  opacity: 1
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br><br><br><br><br><br><br><br>
<div id="aconmine">
  <div class="aconmineli"><a href="#tab1"><h2>Пальтовая группа </h2></a>
    <div id="tab1" class="aconminecontent">
      <a href="#tabcloseme" class="closeme"></a>
      <br><br><br><br><br><br><br><br><br><br>
    </div>
  </div>
  <div class="aconmineli"><a href="#tab2"><h2>Костюмная группа </h2></a>
    <div id="tab2" class="aconminecontent">
      <a href="#tabcloseme" class="closeme"></a>
      <br><br><br><br><br><br><br><br><br><br>
    </div>
  </div>
  <div class="aconmineli"><a href="#tab3"><h2>Плательная группа </h2></a>
    <div id="tab3" class="aconminecontent">
      <a href="#tabcloseme" class="closeme"></a>
      <br><br><br><br><br><br><br><br><br><br>
    </div>
  </div>
  <div class="aconmineli"><a href="#tab4"><h2>Спортивные изделия </h2></a>
    <div id="tab4" class="aconminecontent">
      <a href="#tabcloseme" class="closeme"></a>
      <br><br><br><br><br><br><br><br><br><br>
    </div>
  </div>
  <div class="aconmineli"><a href="#tab5"><h2>Текстильно-трикотажные изделия</h2></a>
    <div id="tab5" class="aconminecontent">
      <a href="#tabcloseme" class="closeme"></a>
      <br><br><br><br><br><br><br><br><br><br>
    </div>
  </div>
  <div class="aconmineli"><a href="#tab6"><h2>Изделия из Кожи и Замши </h2></a>
    <div id="tab6" class="aconminecontent">
      <a href="#tabcloseme" class="closeme"></a>
      <br><br><br><br><br><br><br><br><br><br>
    </div>
  </div>
  <div class="aconmineli"><a href="#tab7"><h2>Изделия из Натурального Меха </h2></a>
    <div id="tab7" class="aconminecontent">
      <a href="#tabcloseme" class="closeme"></a>
      <br><br><br><br><br><br><br><br><br><br>
    </div>
  </div>
  <div style="position: fixed; top: 0px;"></div>
</div>
<br><br><br><br><br><br><br><br><br><br>

相关问题
最新问题