How to remove autoscroll to a div id :target?

Question

I have this accordion menu using html and css only, but the buttons are made of :target id. Is there any javascript that can remove the auto-scroll when I press any of the buttons? It hovers to the anchor #id .

There are lots of related answers on stackoverflow , but none of them did help me, please don't just suggest any other questions as an answer.

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

Here is a demo on jsfiddle of my accordion.

Answer 1

Here is the solution. The explanation is within the code - each comment for the relevant line of code.

 $('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>