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

Developing an interactive web interface with HTML

I've been attempting to design a flexible HTML page that replicates the layout of a Java applet clock, but I'm unsure if my current approach is correct. Below is an example of the three-clock image set that I am currently working on. My method i ...

htmlcsslayout

Is it possible to load jQuery dialog from the Controller/View?

I have implemented a jQuery dialog feature to upload files in my application. When the file is selected and submitted, a controller is invoked to process the file and send it to the model for insertion. The model then communicates back to the controller wi ...

jquerydialogcontrollerrender

Can we effectively manage the input for a component that is created dynamically in real-time?

Please note: I am a newcomer to ReactJS, JavaScript, and the world of front-end development in general. Hello everyone, I have made the decision to create a versatile component that can handle all the forms within my project based on a predefined templat ...

javascriptreactjsgeneric-programmingmaterial-ui

Unbounded AngularJS 1.x looping of Ag-grid's server-side row model for retrieving infinite rows

I am obtaining a set of rows from the server, along with the lastRowIndex (which is currently at -1, indicating that there are more records available than what is being displayed). The column definition has been created and I can see the column headers in ...

javascriptangularjsgridag-grid

Having trouble getting PHP Ajax File Upload to function properly?

I am using Bootstrap and have a Form in a Modalbox. There is a Fileupload field, and I want to upload images. However, when I click the Submit button, the site seems to reload instantly and there is no file uploading... Below is my Ajax Script: <scri ...

phpjqueryajax

The error encountered is an unhandled rejection with a message stating "TypeError: Cannot access property 'username' of null

My tech stack includes NodeJS, PassportJS, MySQL, and Sequelize (ORM for MySQL). The following code snippet is taken from my Passport.JS file. Whenever a user registers on my website, an error is returned if the username or email is already in use. If both ...

javascriptmysqlnode.jssequelize.js

Unveiling the Power of AngularJS for Parsing JSON Data

A list of images is being generated in a table-like structure using the code snippet below. Each image represents a cell in this table, with its ID specifying its row and column position. <ul> <li class="row"> <ul> & ...

javascriptjsonangularjsangularjs-ng-repeat

Obtain $stateParams excluding UI-navigation

Is there a way to access $stateParams without using a <ui-view> tag in the HTML? I'm trying to make this code function properly: .config([ '$locationProvider', '$stateProvider', function($locationProvider, $stateProvide ...

javascriptangularjsangular-ui-router

Console does not display AJAX response

Currently, I am utilizing AJAX to fetch form data from a Django application and my objective is to display the response in the console. $.ajax({ type: 'GET' , url: url, data: {'PUITS': PUITS ...

javascriptjqueryjsondjangoajax

Is it possible to interpret all events from multiple perspectives?

Is it possible to listen for events in three different ways? This example shows how we can listen for the load event: 1. <body onload="doSomething();"> 2. document.body.onload = doSomething; 3. document.body.addEventListener('load', doS ...

javascripthtmldom-events

Is there a way to substitute a custom <form> element for the default <form> in an already existing plugin?

I am currently in the process of customizing a theme and a plugin within WordPress. In the plugin, there is a button that allows users to click on it to bring up a form where they can ask questions. While I want users to post their questions through this p ...

phphtmlcsswordpressfooter

Issue: Angular 14 - Validators Not Resetting in Nested FormGroup

I am currently working on implementing a nested FormGroup. However, I have encountered an error when attempting to reset the form. Here is the structure of the form: form: UntypedFormGroup; this.form = this.fb.nonNullable.group({ f1: [''], f2: ...

javascriptangulartypescriptangular-reactive-formsangular-forms

The antithesis of jQuery's .parents() selector

I am currently developing a userscript for a webpage with an old-fashioned design consisting mainly of tables. My goal is to access a long table of fields so that they can be filled in automatically by the script. To simplify, the structure is as follows: ...

javascriptjquery

Embrace the flexibility of using Next.js with or without Express.js

Recently, I started the process of migrating a project from create-react-app to next.js. However, I am facing uncertainty when it comes to migrating the backend of the project. Currently, my backend is built with an express server. In next.js, there are p ...

javascriptexpressnext.jsserverless

How to trigger a function across various controllers in AngularJS

We're in the process of creating an app using phonegap onsen and angularJS. Attempting to invoke a function from a different controller has been challenging. Despite following various documentation such as this Unfortunately, it's not working f ...

javascriptangularjsonsen-ui

Encountering a missing value within an array

Within my default JSON file, I have the following structure: { "_name":"__tableframe__top", "_use-attribute-sets":"common.border__top", "__prefix":"xsl" } My goal is to add values by creating an array, but I am encountering an issue where my ...

javascriptarraysangularjsjson

Tips for querying MongoDB schemas that reference other schemas in the field?

Looking to search for a product by its name within the DOC Schema. However, the products are stored as references in another Product Schema with the _id. Below you can find the code snippets to understand the structure: DOC Schema import mongoose from &qu ...

javascriptnode.jsmongodbnext.jsmongoose-schema

The Access-Control-Allow-Origin error is preventing the Angularjs post request from going through

I am encountering an issue with my index.html file that is sending a post request to localhost:3000/SetUser. The error I keep receiving states XMLHttpRequest cannot load https://localhost:3000/SetUser. No 'Access-Control-Allow-Origin' header is p ...

javascriptnode.jsangularjsexpress

The fetching of data with getJSON through an IP address is experiencing technical

Here's the issue I'm facing: Whenever I make a json call using the code below var url="http://localhost:9000/json"; $.getJSON(url, function(data){ alert(data['yay']); }); It works perfectly fine. However, my localhost IP is ...

jqueryajaxplayframeworkgetjson

Submitting values to a different page in PHP using jQuery AJAX

I am having trouble sending data to another page using jQuery AJAX and PHP. Below is the form located in page1.php: <form method="post" action="page1.php"> Name : <input type="text" id="N_Txt"> Email : <input type="text" id="Emai ...

phpjqueryajax