When the page loads, the HTML side menu will automatically scroll to the active item in a vertical

My website features a vertical side menu with approximately 20 items. The issue I am facing is that when a user clicks on an item, the destination loads but the side menu must be manually scrolled to find the active item if it's located at the bottom of the list. Is there a way to automatically scroll the side menu to the active item when the page loads? Below is a snippet of the code. Any assistance would be appreciated.

<nav class="menu">
   <ul class="sidebar-menu metismenu" id="sidebar-menu">
       <li class="">
          <a href="page1.html">Page 1</a>
       </li>
       <li class="">
          <a href="page2.html">Page 2</a>
       </li>
       <li class="">
          <a href="page3.html">Page 3</a>
       </li>
       <li class="">
          <a href="page4.html">Page 4</a>
       </li>
       <li class="">
          <a href="page5.html">Page 5</a>
       </li>
        <li class="">
          <a href="page6.html">Page 6</a>
       </li>
        <li class="">
          <a href="page7.html">Page 7</a>
       </li> 
      .......
       <li class="active">
          <a href="page20.html">Page 20</a>
       </li>
   </ul>
</nav>
javascripthtmljquerycss

Answer №1

One method for achieving this is through javascript/JQuery where you can save the index of the selected item in localStorage. Afterwards, retrieve the saved index on window.onload/document.ready and apply scrollIntoView or animate to automatically scroll to the active item.

Answer №2

It is recommended to have two separate divs, one for the menu and one for the display destination page. Assign an id tag to each menu item to set focus. For example:

<li id="8" class="">
    <a href="page8.html">Page 8</a>
</li>

To set focus on the 8th item, use document.getElementById("8").focus(). Alternatively, you can make the menu div non-scrollable.

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

Create a form button that triggers the execution of a Python function

Need help with calling a Python function with a form button Greetings, everyone! I am encountering an issue and would greatly appreciate any assistance. I have a webpage that contains a single button within a Python structure: <form action = "http://l ...

htmlpython-3.xflask

Node interprets string as an object

I encountered the following code: <a class="btn-primary btn" href="/employer/booth/<%= user._id.toString() %>" <% console.log(typeof user._id, user._id) %> target="_blank"> Preview your booth </a> Upon running this ...

javascriptnode.jsexpress

I am searching for an uncomplicated approach to eliminate duplicate arrays of objects

Question: const info=[ { id: 123, name: "dave", age: 23 , address:city:"chennai"}, { id: 456, name: "chris", age: 23, address:city:"delhi"}, { id: 789, name: "bob", age: 23, address:city:& ...

javascriptarraysreactjsobjectduplicates

javascript download multiple PDF files on Internet Explorer

I am facing an issue with downloading multiple PDF files In my list, I have various a elements with links to different PDF files. I created a loop to go through each a element and generate an iframe using the value of the href as the source. This solutio ...

javascriptjquerypdfdownload

Utilizing JQuery to extract element tags exclusively, without including their interior content

I am trying to work with a string that includes HTML and I need to remove the span element entirely while preserving its contents within the string (specifically, I want to retain the word "Canadian" and any other elements). var htmlString = <p>Th ...

javascriptjquery

Exploring the endless possibilities of using repeatable bootstrap panels

The current code structure is as follows (custom wells, labeled as well-xxxx, apply brand colors to default wells): <div class="panel-group" id="accordion1"> <div class="panel panel-info"> <div class="panel-heading" data-toggle="colla ...

phpjquerytwitter-bootstrapcodeigniter

Is there a proper way to supply createContext with a default value object that includes functions?

As I was creating my context, I set an initial state and passed the necessary functions for useContext. Although this method is functional, I'm concerned it may present challenges in larger projects. Does anyone have suggestions for a more efficient a ...

javascriptreactjstypescriptreact-hooksreact-context

Ensure an element stays in its position relative to another element by utilizing the CSS property "position: absolute"

I want to incorporate a circle with an image inside into a navbar. The circle should be larger than the navbar, similar to the image shown here: https://i.sstatic.net/kpJgC.png I have been using "position: absolute" to keep the circle in place, but the is ...

htmlcssbootstrap-5navbar

From where does the require.js file originate?

Currently, I am learning Angular 2 from the tutorial available at https://github.com/pkaul/maven-typescript-example. Once I proceed with the 3rd step (mvn jetty:run), a runnable war folder is generated in the example-webapp/target directory. However, I ha ...

javascriptangularmavengruntjs

Implementing Pagination for a JSON Object using Javascript and Jquery

I am looking for the most effective way to implement pagination in my current situation: I am using "$('body').append(htmlText);" to display the items from a JSON object. How can I set up pagination so that each page displays only one item based ...

javascriptjqueryjsonpagination

How can you ensure that divs stay the same size and appear next to each other without resorting to using

I need assistance with organizing my website layout as shown below: The image div will display an image of variable size, which needs to be vertically and horizontally centered. The text div will contain a large amount of text. While this could easily be ...

htmlcss

Updating Vue 3 asynchronous data doesn't reflect changes when the local settings are modified

I have a dedicated external .js file designed to retrieve data from the backend depending on the website's locale. Check out the code snippet below: import { ref } from "vue"; export function fetchData(section, key) { // Making a GET requ ...

javascriptvue.jsfetch

Refrain from showing content beneath a certain element

Is there a way to hide all content that appears after a specific element, such as a particular class of div? The issue I am facing involves using a 1&1 webpage builder with a restrictive layout-template enforced by my boss. I am trying to remove the foote ...

javascriptjquerycsshidefooter

I am having trouble adding multiple items on different occasions - is it something to do with JQUERY

I have been working on a dynamic website that loads Firebase values into a table. However, I encountered an issue where the data does not appear when going back to the orders page after visiting another page. After some testing, I found that placing a but ...

javascriptjqueryhtmlajax

Sort through data based on specific data fields upon the button click event using JSON and Vue.js

Is there a way to use JSON files in Vue.js to filter data based on category when a button is pressed? I have objects with categories inside the data. portfolio-v1.json { "data":[ { "image_path":"static/products/DEL ...

javascriptjsonvue.jsvuejs2

Displaying text on hover and showing a text box when a link is clicked using CSS and JavaScript

Hovering over the text will display "Edit," and clicking on it will reveal a text box. This function will be used to update content using ajax. HTML: <table> <thead> <tr> <th> Name </th> <th> Age </th> ...

javascripthtmlcssshow-hide

methods for detaching event listener from bootstrap carousel indicator elements

I am currently utilizing the bootstrap5 carousel feature and I am seeking a way to trigger a custom event when either the previous or next indicators are clicked. My goal is to stop the default bootstrap event from being triggered, however my attempts at v ...

javascriptbootstrap-5event-listenerbootstrap-carouselremoveeventlistener

Converting keyValue format into an Array in Angular using Typescript

Is there a way to change the key-value pair format into an array? I have received data in the following format and need to convert it into an array within a .TS file. countryNew: { IN: 159201 BD: 82500 PK: 14237 UA: 486 RU: 9825 } This needs to be transf ...

javascriptangulartypescript

Utilizing cloud functions to distort an inappropriate image

I have a requirement to analyze any uploaded image for inappropriate content and blur it if necessary. The log this image is inappropriate indicates that the detection process is working correctly. However, I am not able to see any further logs which sugg ...

javascriptnode.jsfirebasegoogle-cloud-platformgoogle-cloud-functions

What are the specific files I should modify for HTML/CSS in my Ruby application?

My application was initially created with an introduction from: http://guides.rubyonrails.org/getting_started.html I am now looking to add some color and style through CSS. I have located the JavaScript and CSS files, but I am unsure which file is respons ...

javascripthtmlcssruby-on-railsruby