What is the best method for disabling autoscroll for a specific div id when the :target attribute

I created this accordion menu using only html and css, but the buttons are built with the :target id. Is there a way to prevent the automatic scrolling when any button is clicked without using javascript? It currently moves to the anchor #id.

I've searched for solutions on stackoverflow, but none of them have been effective for me. Please refrain from suggesting other questions as answers.

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

...

.aconmineli a:hover {
    height: 49px !important;
    display: block !important;
    opacity: 1
}
...

You can view a demo of my accordion here on jsfiddle.

javascriptjqueryhtmlcssaccordion

Answer №1

Here is the solution provided with detailed explanations for each line of code.

$('a').click(function(event) {
  event.preventDefault();
  // Storing the scrollY position before browser scrolls to :target
  var scrollTop = window.scrollY;
  // Manually changing the hash
  location.hash = $(this).attr('href');
  // Scrolling back to the saved scroll position
  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>Group 1 </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>Group 2 </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>Group 3 </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>Sports Items </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>Textile Articles</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>Leather Goods </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>Natural Fur Products </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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate information into a React component

I'm currently working on my initial react component and facing a challenge while adding items to the parent element through an external click event. The user needs to select from a list of search results, and I intend for these selections to be incorp ...

javascriptreactjs

Guide to clearing input fields and displaying an error message through Ajax when the requested data is not found within a MySQL database

I am looking for a way to clear the textboxes and display an alert message if the data is not found in the MySQL table. I encountered an issue when using type: 'json' as removing it makes the alert work, but then the data from the MySQL table doe ...

javascriptphpjquerymysqlajax

What steps can I take to avoid keypress events causing issues with the browser's input functionality?

Utilizing Bootstrap's modal component, I have implemented an "Add User" dialog within my web application. In order to streamline the user experience and enable quick data entry, I am aiming for the escape and enter keys to close and submit the form re ...

javascripttwitter-bootstrapmodal-dialog

Would you like to store modified CSS properties in a cookie?

Currently, I am facing a challenge while working on an ASPX page where CSS is used to define DIV properties. Although these properties can be altered on the page, they do not reflect when attempting to print them. Is there a method to modify CSS properties ...

cssasp.net

Leveraging summernote in meteor with Discover Meteor tutorial

Recently, I've been delving into the world of Discover Meteor and encountering some challenges along the way. My current hurdle involves integrating content entered in summernote into mongo, but it seems to be more complicated than expected. The fil ...

javascriptjqueryhtmlmongodbmeteor

What is the best way to invoke an external JavaScript source using another JavaScript source?

I am trying to connect 2 different files together. file1.php and document.html file1.php has the following code in it: document.writeln('< script src="https://www.googletagservices.com/tag/js/gpt.js"> googletag.pubads().definePassback ...

javascriptjqueryhtml

What is the correct way to initialize a variable that will store the output of setInterval?

While examining a question, I came across someone's solution that proposed updating the code below. In the comments section, it was suggested: Instead of setting this.tm to undefined, we should set it to 0. Since it's a time interval, it shoul ...

javascriptreactjssetinterval

Kartik's gridview in yii2 has a unique feature where the floating header in the thead and tbody are

I'm looking to create a table gridview with a floating header, where the tbody and thead are not the same. The image appears after refreshing the page, before the modal is refreshed. After refreshing the modal, this modal is inside pjax and it sets t ...

javascriptphpgridviewyii2

Differences in row padding when transitioning from Bootstrap 3 to Bootstrap 4

One thing I've noticed is that when utilizing Bootstrap 3, the use of div.row would automatically create a vertical spacing between rows which was quite appealing. However, upon transitioning to Bootstrap 4, this automatic spacing seemed to disappear. ...

htmlcssangularjstwitter-bootstrap

React Scroll and Material-UI button active link not functioning correctly

Whenever the link goes to the correct page, I want to add a special background effect or change the font color. Despite trying to use CSS for this purpose, it didn't work as intended. If you want to take a look at my code on codesandbox, follow this ...

javascriptcssreactjsmaterial-uireact-scroll

Can a variable be initialized with a concealed or additional argument?

After just 2 weeks of coding, I'm struggling to find information on how to initialize a variable with an extra argument in a recursive function call. Is this even possible? And if it is, are there any scenarios where it's considered best practice ...

javascriptrecursionmethodsarguments

Error: An unexpected symbol '<' was encountered after the build process in Vue.js

I just finished deploying a MEVN stack application to heroku. While everything is functioning properly locally, I am encountering a blank page and the following errors in the console post-deployment: Uncaught SyntaxError: Unexpected token '<' ...

javascriptexpressvue.jsheroku

Challenges encountered in converting JSON objects into an HTML table

My goal is to convert a JSON object into an HTML Table using the following code: JSONSelect.forEach(selecRow, options, function (queryResult) { var sem = $.trim(JSON.stringify(queryResult, null, ' ')); console.log(sem); $.getJSON(&ap ...

javascriptjqueryajaxjsongetjson

Include a scrollbar within a Bootstrap table grid under a div with a width of 12 columns

How can I add a scrollbar to the grid below? It is using a bootstrap table inside a bootstrap col 12 div. I have attempted to use the following CSS, but it does not apply a scrollbar, it only disrupts the columns. divgrid.horizontal { width: 100%; ...

htmlcssvue.jsbootstrap-4styles

SystemJS is loading classes that are extending others

In my Angular2 application, I have two classes where one extends the other. The first class is defined in the file course.ts (loaded as js) export class Course { id:string; } The second class is in schoolCourse.ts (also loaded as js) import {Cours ...

javascripttypescriptangularsystemjs

What is the best way to verify multiple email addresses simultaneously?

Is there a method to validate multiple email addresses entered by users in a textarea? My current approach involves using ng-pattern for validation. ...

javascriptangularjs

Validating date parameter in Wiremock request - How to ensure dynamic date matching during testing?

Looking for some assistance in verifying that the date in a request is exactly Today. I've tried various methods from the documentation, but haven't achieved the desired outcome yet. Calling out to any helpful souls who can guide a junior QA thro ...

javascriptjsonmappingwiremock

What is the best way to add content to a TextArea generated by the html helper in MVC 3?

I am attempting to retrieve a List collection of comments from the View using Razor and Microsoft's HTML helper for TextArea (@Html.TextAreaFor). While I can populate individual comments easily, I am unsure how to add the ENTIRE list collection of com ...

c#jqueryhtmlasp.net-mvc-3textarea

Highlighting the current menu item by comparing the URL and ID

Looking to make my navigation menu items active based on URL and ID, rather than href. None of the suggested solutions (like this one, this one, or this one) have worked for me. This is how my Navigation is designed: <nav id="PageNavigation"& ...

javascripthtmljquerycssnavigation

Modify button behavior on click after the initial press

Struggling to make this work the way I want. I have a button that should execute Javascript function A when clicked, and in function A, I need to change the onclick attribute to function B. This way, on the second tap of the button, it will trigger functio ...

javascripthtmlbutton