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

Analyze the HTML data received from the API

Implementing Various Conditions in ng-if Using AngularJS

What is the best way to save the value returned by a foreach loop into an array and then send two responses

Unusual alterations to HTML and CSS to meet specific needs

Unleash the potential of a never-ending expansion for grid cells on Canvas

The div in Bootstrap is not becoming scrollable despite using "overflow: auto"

What is the best way to ensure that the text within Span children is properly laid out to match the width of the parent div tag?

Unexpected behavior from Bootstrap within React

Slider in MaterialUI featuring a vibrant spectrum of colors

Change object values to capital letters

Minimize/Maximize Swagger Response Model Class View

Responsive HTML5 audio player adjusts size when viewed on mobile devices

When using Inertia.js with Laravel, a blank page is displayed on mobile devices

Animating the maximum height causes a delay in the performance of other elements

What are the limitations of using a JS file within an Angular application?

Get every possible combination of a specified length without any repeated elements

Mobile devices offer a seamless vertical scrolling experience

Can you assist in resolving this logical problem?

Differences in weekend start and end days vary across cultures

Height problem with the data-reactroot component