Attempting to make this Wordpress theme smoothly navigate to a specific id when a link is clicked from another page

Question

Attempting to make this Wordpress theme smoothly navigate to a specific id when a link is clicked from another page

If you take a look at the website haloespresso.com.au/working/, you'll see that when you click on the "menu" option in the top menu, it scrolls to the menu id #pg-9-4. This is exactly what I am aiming for. However, on other pages, the menu is slightly different and the same link redirects to the home page with #pg-9-4 added to the end of it. The idea here is to have the link from another page open the home page but scroll directly to the menu section. Despite my efforts, I cannot seem to figure out why it keeps jumping back to the top instead of staying at the specified spot. It briefly goes there for a split second as the page loads, but then immediately returns to the top. I am struggling to understand what is causing this issue and hindering the basic HTML functionality that should keep me anchored to the designated menu area.

I would greatly appreciate any assistance with resolving this matter, as my expertise does not extend much beyond html/css and simple jquery.

javascript jquery html css wordpress

Answer 1

Answer №1

To make it work, you need to add the anchor at the end of the hyperlink.

Simply include a link in this format:

<a href="/anotherpage.html#section6">Link to specific section on another page</a>

Update: It seems like you're having trouble implementing this. Can you share how your links are structured and what the relevant HTML looks like on the target page?

Answer 2

To make it work, you need to add the anchor at the end of the hyperlink.

Simply include a link in this format:

<a href="/anotherpage.html#section6">Link to specific section on another page</a>

Update: It seems like you're having trouble implementing this. Can you share how your links are structured and what the relevant HTML looks like on the target page?

Answer 3

Answer №2

Here is a useful jQuery code snippet to implement:

$(document).ready(function() {
   function scrollToHash() {
      // Retrieve URL Hash
      var hash = window.location.hash;

      // Check if hash exists and is not empty
      if (hash != '') {
         // Scroll to element with matching ID after a slight delay
         setTimeout(function() {
            $(document).scrollTop($(hash).offset().top);
         }, 10);    
         // Debugging for reference
         console.log(hash);
         console.log('offset:' + $(hash).offset().top );
     }  
   }
   scrollToHash(); // Trigger the scroll function based on hash
});

Explanation:

This code captures the URL hash (e.g., www.example.com/#hash), verifies its presence and scrolls the page to the element with the matching ID after a brief delay of 10 milliseconds. This delay helps prevent browser loading issues.

Answer 4

Here is a useful jQuery code snippet to implement:

$(document).ready(function() {
   function scrollToHash() {
      // Retrieve URL Hash
      var hash = window.location.hash;

      // Check if hash exists and is not empty
      if (hash != '') {
         // Scroll to element with matching ID after a slight delay
         setTimeout(function() {
            $(document).scrollTop($(hash).offset().top);
         }, 10);    
         // Debugging for reference
         console.log(hash);
         console.log('offset:' + $(hash).offset().top );
     }  
   }
   scrollToHash(); // Trigger the scroll function based on hash
});

Explanation:

This code captures the URL hash (e.g., www.example.com/#hash), verifies its presence and scrolls the page to the element with the matching ID after a brief delay of 10 milliseconds. This delay helps prevent browser loading issues.

Attempting to make this Wordpress theme smoothly navigate to a specific id when a link is clicked from another page

Answer №1

Answer №2

Similar questions

Starting from index 1, I am crafting a JSON array

The commands 'npm run watch' and 'dev' are no longer functioning on my computer for my Laravel project. I am encountering an error stating: '[webpack-cli] RangeError: Maximum call stack size exceeded'

Unable to make a commit with husky: encountering an issue with the .husky/pre-commit script, specifically on line 4 where the "npx"

What is the best way to conceal the <option> tag if the value is empty?

Receiving an error of "undefined" when trying to capture the selected

Efficient - Managing numerous database connections

Removing an object in Three.js using scene.getObjectByName() method

How can I show a form and table on the same URL using Django?

Looking to transform a JSON Object into a JSON Array for compatibility with Highcharts

Replace the first-child element in a CSS class with a different class

Can Javascript have IDs within hrefs?

Database connection error: Issue with deploying Google App Engine

What is the best way to create a clickable anchor tag that is nested within a paragraph tag?

What could be causing the type error to show up in my JavaScript file?

Maintain the text layout when copying and pasting from the Angular Application

Can the getState() method be utilized within a reducer function?

Exploring the Power of Webpack and Web Workers within Ionic 2

The script fails to function properly when it is accessed from a different webpage

What could be the reason for my function suddenly needing the password to be filled in?

What is the inner workings of CSS?