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

Switch to using addresses instead of latitude and longitude coordinates when utilizing the Google Maps API

I am looking to utilize Google Map Markers to indicate the locations where our services are offered. The code I have created using latitude and longitude is functioning properly, however, for my project I need to display city names instead of lat/long ...

javascripthtmlgoogle-mapsweb

Utilizing Adjacent Sibling Selectors within the context of a specific enclosing class

I have a question regarding the following HTML structure: <div class="a"> <div class="b"></div> <div class="c"></div> </div> My goal is to apply a specific CSS rule only within the a class: .b + .c { margin-le ...

csscss-selectors

Receiving POST data in the req.body object with only the key specified in Express.js

I am encountering an issue with my current POST request. There is a simple function in place that handles the sending of data to the server using AJAX. handleSubmit(event) { var http = new XMLHttpRequest(); // object allows for making http requests // ...

javascriptnode.jsajaxreactjsexpress

"Maximizing revenue with dynamic Adsense integration using

While searching for solutions related to Adsense and AJAX, I came across this, this, and this, but my situation seems slightly different. I don't intend to refresh the Ads every time an AJAX call is made. Let's say I have a page called "mypage.p ...

jqueryajaxadsenseads

Tips on utilizing recursive Promises within a loop while transferring arguments to another function

Despite searching other threads on SO, I couldn't find a satisfactory answer to my problem. Every solution seems to be missing something essential for my case, especially since none of them address Apple Music specifically. The Apple API relies heavil ...

javascriptnode.jses6-promiseapple-musickit-js

Having trouble displaying a background image with CSS

When I open Chrome from my code editor (WebStorm), the header image shows up perfectly. However, after closing WebStorm and manually opening index.html from my project folder, the header image fails to load/display. The CSS for the background image is bac ...

css

A dynamic substitute for the Supersized slideshow option

I am in the process of updating my website and the final task on my to-do list is to replace the Supersized plugin with a more suitable alternative. The website is constructed using WordPress and I am utilizing jQuery. My goal is to find a fullscreen slid ...

javascriptjquerywordpresssupersized

Is it possible to nest HTML within a Route component?

<Router> <Routes> <Route path='/' element={<Navbar />} /> <Route path='/' element={<div className='recipes'> {query ? query.map((object, i) => ( <Recipe ...

htmlreactjsreact-routerreact-router-dom

Integrate React tags with Redux form to ensure the values are transmitted as an array within the payload

I am currently working on a redux-form that contains a component for tags. I am struggling to figure out how to retrieve the tag values in an array as a payload. Any help would be greatly appreciated. Below is the code snippet for the tags component: ...

javascriptreactjsreact-reduxtagsredux-form

Customize the Color of Your Material-UI Drawer

Need help with setting the background color of a Material-UI Drawer. I tried using the following code but it didn't work: const styles = { paper: { background: "blue" } } After defining the styles, I passed them to the Drawer component like ...

javascriptreactjsmaterial-ui

What is causing the floated element to overlap the element below instead of vice versa?

div { background-color: #00FFFF; } p { width: 50px; height: 50px; border: 1px solid black; margin: 0px; } #p1 { background-color: red; float: left; } #p2 { background-color: green; } #p3 { background-color: orange; } #p4 { backgr ...

htmlcsscss-float

Troubleshooting issue in App component while utilizing React-Redux's 'connect' function

Upon attempting to utilize the connect() function provided by react-redux, I encountered the following error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the r ...

javascriptreactjsreduxreact-redux

I am facing an issue where the text I included is not appearing on the website that

While developing a React version of my online portfolio, I encountered an issue. Once deployed on GitHub pages, the text on my landing and contact pages disappeared. Despite removing the background image thinking it might be hiding the text, the issue pers ...

javascriptcssreactjsmaterial-uigithub-pages

Is it possible to arrange elements in CSS based on their attribute values?

I need to arrange a list of images in ascending order based on the index attribute using CSS. The challenge is that the index values will change dynamically and new images will be added through Ajax, so I want them to automatically update in the correct or ...

htmlcssimagesorting

Ways to loop through an array in a JSON object

Exploring methods of iterating through an array in json: $(document).ready(function(){ $('#wardno').change(function(){ //this code will execute whenever there is a change in the select with id country $("#wardname > ...

javascriptjqueryjson

Javascript: triggering a self-executing function manually

I have a code snippet similar to the following: var msg="first call"; (function test(msg) { console.log("inside self call"); } )(); msg="second call"; console.log("before inline call"); test(msg); console.log("after inline call"); In thi ...

javascript

What are the advantages of using React JS for a Single Page Application compared to server-side rendering?

Currently, I am faced with a conundrum when it comes to selecting the best approach for a highly scalable project. On one hand, server-side rendering using Node.js with Express (utilizing EJS) to render full HTML pages is an option. On the other hand, ther ...

javascriptnode.jsreactjsexpressreact-router

Switching from module.exports in Javascript to Typescript format

My Node-express code currently uses module.exports to export functions. As I am converting the code to TypeScript, I need to find out how to replace module.exports in typescript. Can you help me with this? ...

javascriptnode.jstypescriptexpress

I must create text that is transparent against a colorful gradient background

Hey there! I'm seeking help in figuring out how the text on this site is designed. You can take a look at it here. Essentially, what I'm aiming for is to have the text color match the gradient of the background color from the previous div, while ...

javascripthtmlcss

Modifying a single route among several nested routes with specific names

My template includes various named, nested views: Template 1: <body> <div ui-view></div> </body> Template 2: <header></header> <div ui-view="left"></div> <div ui-view="canva ...

javascriptangularjsangular-ui-routersingle-page-application