Clicking on an absolute HTML element will instantly scroll back to the top of the page

Question

Clicking on an absolute HTML element will instantly scroll back to the top of the page

Working on a website, I've designed a custom menu that is hidden with 0 opacity and z-index -1. When a button is clicked, the menu will appear on the screen.

You can visit to see the site in action.

The issue I'm facing is that every time I click the button to show the menu, it scrolls back to the top of the page.

I'm looking for a solution where the menu appears without causing the page to scroll back to the top when clicked.

I have tried using fixed and absolute positioning without success.

Thank you for your help.

javascript jquery html css

Answer 1

Answer №1

Here is the JavaScript code snippet found on your website:

<script>
    jQuery(document).ready(function($){
    // You can now utilize jQuery code here using the $ shortcut
    // This will run after the document has fully loaded
    // Any interactions with your HTML should be done here

    var buttonMenu = $('#menuButtonContainer');
    var menuScreen = $('#menue');

    buttonMenu.click(function(){
        //alert('clicked');
        if(menuScreen.css('opacity')=='0'){
            menuScreen.css('opacity', '1');
            menuScreen.css('z-index', '999');
        }
        else {
            menuScreen.css('opacity','0');
            menuScreen.css('z-index','-1');
        }
    });

}); 
</script>

In this section:

buttonMenu.click(function(){
    //alert('clicked');

Update it to:

buttonMenu.click(function(e){
    e.preventDefault();
    //alert('clicked');

Notice the addition of e as a function argument and the new line e.preventDefault();

Answer 2

Here is the JavaScript code snippet found on your website:

<script>
    jQuery(document).ready(function($){
    // You can now utilize jQuery code here using the $ shortcut
    // This will run after the document has fully loaded
    // Any interactions with your HTML should be done here

    var buttonMenu = $('#menuButtonContainer');
    var menuScreen = $('#menue');

    buttonMenu.click(function(){
        //alert('clicked');
        if(menuScreen.css('opacity')=='0'){
            menuScreen.css('opacity', '1');
            menuScreen.css('z-index', '999');
        }
        else {
            menuScreen.css('opacity','0');
            menuScreen.css('z-index','-1');
        }
    });

}); 
</script>

In this section:

buttonMenu.click(function(){
    //alert('clicked');

Update it to:

buttonMenu.click(function(e){
    e.preventDefault();
    //alert('clicked');

Notice the addition of e as a function argument and the new line e.preventDefault();

Answer 3

Answer №2

Eliminate transparency
Define display as none and position as fixed
Upon clicking, switch to display block

Answer 4

Eliminate transparency
Define display as none and position as fixed
Upon clicking, switch to display block

Answer 5

Answer №3

To prevent the default action of the anchor tag, you should follow these steps:

Simply add the following code snippet to your script:

$("#buttonMenue").click(function(event) {
   event.preventDefault();
});

Answer 6

To prevent the default action of the anchor tag, you should follow these steps:

Simply add the following code snippet to your script:

$("#buttonMenue").click(function(event) {
   event.preventDefault();
});

Clicking on an absolute HTML element will instantly scroll back to the top of the page

Answer №1

Answer №2

Answer №3

Similar questions

"Error encountered in @mui/x-data-grid's ValueGetter function due to undefined parameters being passed

Managing JavaScript promise rejections

The occurrence of events for a basic model in Backbone is inexplicably non

Looking to utilize HTML and AngularJS to locally upload a file?

What steps should I take to ensure the privacy of this React Layout?

Alteration of icon size in input field using jQuery unintentionally

Having trouble with the filtering feature in Material UI Datagrid

The Node/Express server detects discrepancies in JSON data when processing GET and POST requests

Tips for creating a "sticky" button in Angular that reveals a menu when clicked

Is there a way to update an image from the camera in the background without having to refresh the entire

When configuring a domain for Express sessions, it prevents the cookie from being stored

Unlocking the ability to retrieve data generated by the context within getServerSideProps beyond its boundaries (for transitioning from Create React App to Next.js)

Utilizing IndexedDB for data storage

loop through an array and use splice to select items and modify the array

Accessing specific documents in Firebase cloud functions using a wildcard notation

Verify whether a radio button has been selected before

Automatically adjust multiple images on an HTML webpage

Angular Custom Pipe - Grouping by Substrings of Strings

I'm having trouble getting the HTML checkbox symbol to show up correctly. My goal is to create all the elements using the DOM

Creating a responsive form with live updating using ReactJS and utilizing double inputs for better