Stop the background from scrolling and prevent auto-jumping to the top on mobile devices

When users click on the hamburger icon in the top right of our mobile site, I want the drop-down menu to appear and be scrollable without the background scrolling. I tried using JavaScript to set the body to fixed when the menu icon is clicked, but this caused the website to jump to the top of the page, which is not the desired behavior. I want the background page to remain in place when the user clicks on the menu button.

Below is the code that I have already attempted for this issue.

Javascript

jQuery(function($) {
  $(".x-btn-navbar").on("click", function() {
    $("body").toggleClass("noScroll");
  });
});

CSS

.noScroll {
    position: fixed;
}

EDIT Check out our website here:

javascriptjqueryhtmlcss

Answer №1

Using "href="#" in a link will cause the page to scroll to the top. To avoid this issue, make sure to provide the correct URL like href="https://www.google.com/".

Styling with CSS:

.noScroll {
    overflow: hidden;
}

Implementing with JavaScript:

jQuery(function($) {
  $(".x-btn-navbar").on("click", function() {
    $("html, body").toggleClass("noScroll");
  });
});

This will make the <body> unscrollable upon clicking the designated button.

Answer №2

To address the issue of the page jumping to the top when clicking the menu button, start by removing the CSS position fixed from the no-scroll class. This will allow the menu to be scrollable without causing the page to jump. If you want to prevent the page behind the open menu from scrolling when the menu is open, you can use JavaScript event listeners like this:

EventTarget.addEventListener('scroll', noscroll);

Give the body an ID and apply the event listener to that element when the menu is opened. Remember to remove the event listener when the menu is closed:

EventTarget.removeEventListener()

It's important to keep the content of the page separate from the menu to avoid unintended scrolling behavior. Applying the no-scroll class to the body may affect the menu if it is a child of the body.

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

Alter the appearance of another div when focused on

Is there a way to change the fill color of the SVG when a user focuses on the input field? I have included the HTML and SCSS for reference, but I'm not sure how to write the CSS code to achieve this effect. <div class="search"> <svg widt ...

htmlcsssvgsassfocus

React Native: Enhance the background with a vibrant stripe of color

I am trying to incorporate a strip of grey in the middle of my white background, but I am encountering an issue where I am unable to input any text inside it. Below is the code snippet I am working with: container: { flex: 1, justifyContent: "cent ...

javascriptcssreactjsreact-nativebackground-color

What is the process for displaying objects within an object using HTML?

I'm developing an app using Angular and Node.js. I have a complex data structure where one object (order) contains a list of objects (items), which in turn include another list of objects (product IDs). My goal is to properly display all this data wit ...

htmlnode.jsangularngfor

What are the steps to create a hovering dropdown menu that changes the background window to transparent when hovered over?

Is there a way to create a dropdown menu that changes the background window to transparent when hovered over? Here is an example of what I am looking for: The dropdown menu should look like this when hovered over: I would like the background window to b ...

htmlcss

Master the art of fetching response data from an API and implementing a function to process the data and generate desired outputs using Node.js and JavaScript

Being new to node.js, javascript, and vue, I attempted to create a Currency Converter by fetching data from an API for exchange rates and performing calculations in a function. Despite successfully obtaining the exchange rates from the selected country in ...

javascriptnode.jsjsonvue.jshttprequest

A horizontal navigation bar featuring a centrally aligned vertical layout and full-height display

I want to align everything on my menu bar vertically in the center, with the a elements taking up 100% of the available height of the menubar (text would be vertically-centered). However, I do not want to fix the height of my menu bar. (If I were to fix th ...

htmlcss

The surprising behavior of Rails rendering partials even when they are commented out has

I'm intrigued by how Rails 5 handles partials and if there might be a hidden problem I haven't encountered yet. On my current page, I have two partials - one that is included in the HTML itself, and another that is supposed to render inside an aj ...

javascriptjqueryruby-on-railsruby-on-rails-5partials

Clicking on a class within a single tag can be selected using

Currently facing a seemingly trivial issue that I can't quite figure out. I have a jQuery function that selects the class of a tag when clicked, but the problem is that it also selects every other tag beneath the clicked tag in structural order. Howev ...

javascriptjquery

Unable to delete element from the given array

I have been working on removing instances of 'store.state.location.locations' from my locationData array that should no longer be there, but for some reason, they are persisting in the array even though I am no longer passing those instances. ta ...

javascriptvue.jsmapbox

Verify if the contract address corresponds to a token and retrieve the token details, such as its symbol

Can I use web3 to retrieve token information such as symbol and total supply similar to the etherscan API pro endpoint tokeninformation by providing the contract address? I'm interested in determining whether the addresses I collect are tokens or reg ...

javascriptethereumweb3js

What could be the reason for the page scrolling upwards when clicking on href="#"?

I am encountering an issue with a hyperlink <a href="#" id="someID">Link</a> that is located further down the page. This link is used to trigger an Ajax request, but whenever it is clicked, the page automatically scrolls back to the top. I have ...

javascripthtmlajax

Utilizing a box within a background image using HTML and CSS

In the midst of my college project, I've encountered a hurdle. There's an image I need to overlay with a box that has padding on all sides corresponding to the outline of the image. Despite my attempts, I haven't been successful in achieving ...

htmlcss

Using conditional CSS in React/Next.js

While using Next.js, I have implemented conditional rendering on components successfully. However, I am facing an issue where the CSS styles differ between different components. Code 1: import React from "react"; import Profile from "../../ ...

javascriptcssreactjsnext.js

Using React to incorporate the necessary jquery for a separate library

I am looking to incorporate Trumbowyg library into my React project, however, I have encountered an error stating that jQuery is not defined. I found information suggesting that jQuery needs to be made available as a global variable in the window object. ...

javascriptjqueryreactjstrumbowyg

Is the 404 error a result of the ajax code?

I'm currently working on a form that utilizes AJAX to validate and interconnect various form elements. Below is a simplified version of my code: <?php if( isset( $_POST['create_transaction'] ) ) { // do something } ?> <div> ...

javascriptphphtmlajaxhttp-status-code-404

Tips for resolving the error message "cannot read property of undefined"

I've been working on coding a Discord bot and I keep encountering an error when trying to check if "mrole" has the property "app". It's not functioning as expected and I'm puzzled by why this is happening. My intention is to retrieve the te ...

javascriptnode.jsdiscord.js

Tips for managing the most recent keyup event in a search feature

I have a search input on my website. Whenever a user types a letter in it, an ajax request is made to display some content as the result. My goal is to only create an ajax request for the last keyup event when the user types quickly. I came across a soluti ...

javascriptjqueryajax

Learn how to display only certain elements when triggered by the click of another

I have developed a tab system where each tab contains a unique set of questions and answers. The structure of the tabs is exactly as I envisioned, but I am facing challenges with toggling the display of answers when their respective questions are clicked. ...

javascriptjqueryhtml

What is the best way to determine which button was clicked in Django?

My HTML has two buttons - one for accepting and the other for rejecting requests. I am trying to figure out how to determine which button was pressed along with the email of the applicant (tutor_application.tutor.chalkslateuser.email). Despite multiple a ...

pythonhtmldjango

Activate the Jquery-ui Tooltip with a click event

Here is the code I'm using: function DrawTipsProgress(postid, ajaxurl) { var data = { action: 'ajax_action', post_id: postid } jQuery('#dashicon-' + postid).on("click", function () { jQuery.p ...

javascriptjqueryajaxjquery-uijquery-ui-tooltip