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

Question

我有仅使用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的演示。

Answer 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>