Why is the submenu page scrolling up every time I open it?

Currently, I am working on a mobile menu that reveals a submenu when an item is clicked. The issue arises when the page is scrolled down; upon opening or closing the submenu, the page automatically scrolls back to the top.

This scrolling problem only occurs when the page has been scrolled

Below is the code snippet:

http://jsfiddle.net/qsq4y9d8/3/

Here is the CSS for the submenu items:

.lisottomenu {
    letter-spacing: 0.02em;
    display: block;   
    background: #E4BF85;
    border-top: 1px solid #fff;
    font-size: 14px;
    list-style-type: none;  
    width:100%;   
}

The CSS for the parent item looks like this:

ul li.leaf {
    background: #646464 none repeat scroll 0 0;
    border-top: 1px solid #a0a0a0;
    display: block;
    font-size: 15px;
    letter-spacing: 0.02em;
    list-style-type: none;
    position: relative;
 }

Illustrated below is the specific issue:

https://i.sstatic.net/jfpyH.png

(the automatic scrolling glitch)

I would greatly appreciate any assistance, as the code can be lengthy and English isn't my first language...

javascriptjqueryhtmlcss

Answer №1

As I mentioned in my comment:

If you have an <a> tag with an href that includes a "#", it will add a "#" to the URL which triggers the page to scroll to an empty anchor point at the top. By removing the "#", this behavior can be prevented.

To prevent the scrolling to the top, simply update your links from

<a href="#">Link</a>

to

<a href="">Link</a>

This change should stop the page from scrolling to the top when the link is clicked.

Answer №2

It appears that each time the menu is clicked, a multitude of elements are being generated and removed, along with styles being applied and removed from these elements. This may be causing the browser to constantly refresh the layout.

Consider implementing a system where classes are added and removed to display or hide sub menus, and ensure that all necessary elements are preloaded in your HTML instead of dynamically creating and removing them (unless they must be generated dynamically from the server).

Answer №3

The issue here lies with the sub menu causing the overall window height to increase, resulting in unnecessary scrolling when closing the sub-menu.

This behavior is simply how the browser responds to changes in height like this.

One potential solution is to assign a defined max-height to the side menu and set overflow-y:scroll.

#content, #sidebar-first {
    display: inline;
    float: left;
    position: relative;
    overflow-y: scroll;
    max-height: 370px;
}

By implementing this, opening the side menus will no longer impact the document's height.

fiddle - http://jsfiddle.net/qsq4y9d8/9/

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

Modify the child element to hide overflow-x

Looking for a solution with my wrapper class that has specific CSS properties as follows: #wrapper { margin-left: -320px; left: 350px; width: 300px; position: fixed; overflow-y: scroll; overflow-x:hidden; top: 60px; bottom: 10px; transit ...

htmlcss

Size of Output from RSA 2048 Encryption Using JSEncrypt

I've been under the impression that the output size of RSA 2048 bit encryption is 256 bytes. However, I keep getting 344 characters as output when using jsencrypt for testing. Can anyone shed some light on why this discrepancy exists? Tool used for o ...

javascriptencryptionrsajsencrypt

What is the best way to align the navigation bar to the left using bootstrap?

I'm having trouble creating a navigation bar for my website using bootstrap 5. I tried to move the bar to the left by adding the class margin left auto (ml-auto), but it didn't work as expected. Can someone help me figure out why? Thank you in ad ...

htmlcssbootstrap-5navigationbar

Exploring the concepts of closure and scope

It seems that the function inResult always returns false and the loop is not being executed, probably due to a lack of understanding of closures. However, I can confirm that the result variable contains the correct properties. function hasId() {return ...

javascriptjqueryclosures

dual slider controls on a single webpage

I am attempting to place two different sliders on the same page. When I implement the following code for one slider, it functions correctly: <h3>Strength of Belief</h3> <div class="slidecontainer"> <div class="slider_left"> < ...

javascripthtml

Using indented, multi-line logging in a NodeJS environment can help to

I'm looking for a way to display objects that have been printed with JSON.stringify() in the console, specifically within the context of a Mocha test suite output. While my tests are running, I want the object log lines to be indented further to the ...

javascriptnode.jsloggingconsolestdout

The problem of transparency in Three.js when using PointClouds and textures

Seeking assistance with a project involving two PointCloud objects, each representing a specific structure and texture. One of them should be clickable while the other should not. Let's refer to them as P1 and P2, respectively. P1 is set up using a T ...

javascriptthree.jstexturestransparency

Discrepancy in functionality between Android and JavaScript Parse API

Using the open source version of Parse Server as a back end, my Android application saves objects to the server's DB in the form of key-value pairs encoded as JSON. However, when trying to retrieve the same object from an Ionic 2 app using the JS Pars ...

javascriptandroidjsonionic2parse-server

Issue with calling jqPlot function in jQuery causing malfunction

I am perplexed as to why the initial code functions correctly while the second code does not. <a data-role="button" href="#page2" type="button" onClick="drawChart([[["Test1",6],["Test2",5],["Test3",2]]])"> <img src="icons/page2.png" inline style ...

javascripthtmlfunctionjquery-mobilejqplot

Implement strict mode with npm

Are there any potential downsides to not using 'use strict' in a node module published through npm? Is it advisable to omit it if I want the module to be easily usable by others? EDIT: I am specifically asking this question to understand if excl ...

javascriptnode.jsnpm

Show vertical column lists on big screens and stacked drop-downs on mobile devices

I am looking for an efficient solution to showcase a vertical column list on desktop/large screens, while also displaying the same as a stacked dropdown list on mobile devices. This project needs expertise in html, css, and bootstrap. Please take a look a ...

htmlcssbootstrap-4sass

Why is the object not being initialized in a new API call while the string variable is successfully initialized?

There seems to be a basic issue that I am missing, as to why this is happening. GET: example.com/users //returns all data GET: example.com/users?status=1 //returns data with status = 1 GET: example.com/users // this does not work returns the same dat ...

javascriptnode.jsexpressbookshelf.js

Unexpected strings added to files using jQuery Upload File Plugin, caused by WebKitFormBoundary

I'm currently utilizing a plug-in found at My purpose for using this plug-in is to send files to a WCF Rest Service and save them onto the hard drive. The upload process seems to work fine, however, there is an issue with images, executables, etc. a ...

jquerywcf-restjquery-upload-file-plugin

The ng-route directive is preventing me from accessing the HTML content

My attempt to navigate my navbar using angular js seems to be running into an issue where the content in the HTML file is not displaying as expected. I'm unsure of what might be causing this problem. Here is the register page where both register and ...

javascriptangularjsangularparse-platform

Text input in Bootstrap not reaching full width

Trying to achieve a Bootstrap textfield embedded in a panel that spans 100% of the remaining space-width within the panel. However, this is the result obtained: The blue border represents the edge of the panel. Below is the code being used: <div clas ...

javascriptjquerycsstwitter-bootstrap

Initiating numerous jQueryUI dialog boxes

I'm having trouble opening multiple jQuery dialogs one after the other. Only the first one seems to open. Check out this jsFiddle Dialog 1: Presents a YES/NO question. Dialog 2: If you click YES, it puts the word "go" into the hidden field with the ...

jquery-uijquery

Arrange several columns according to the chosen criteria

There is a dropdown feature in my application that has three states - ascending, descending, and none. This dropdown is responsible for rearranging the items in a list. https://i.sstatic.net/xYIfM.png This is my code: list.component.html <div *ngFor= ...

javascriptarraysangulartypescriptsorting

The program encountered an issue: Initialization must be completed before utilizing hooks

I'm facing an issue with my new Next app. I added line no. 6 and now I'm getting an error. Can anyone help me understand why? https://i.sstatic.net/lMKH5.png import Head from "next/head"; import Image from "next/image"; impor ...

javascriptreactjsnext.jsblockchain

Ways to prevent users from manually inputting dates in date fields

I am currently developing an application and I need to prevent users from manually entering a date in the type=date field on the HTML page. I want to restrict users to only be able to select a date from the calendar display, which is in the format MM/DD/YY ...

javascripthtmlangularjs

Struggling to implement nested routes with react-router-dom version 5.2.0?

I'm currently working on implementing nested routing in React using react-router-dom 5.2.0. For a better understanding of the project, you can access the CodeSandbox link here: https://codesandbox.io/s/nested-routes-8c7wq?file=/src/App.js Let's ...

javascriptreactjsreact-router-domreact-domnested-routes