I have spent hours trying to fix this issue and have reviewed many similar questions on SO. I have tried a variety of proposed solutions but none of them work. Here is the problem:
I have a page with anchor links in the main menu. The links bring the user to a new page and then scroll to the correct position. However, when the user is on the page that contains the anchored sections and clicks the links, they scroll to the correct section but then the page reloads bringing the user back to the top of the page.
This is the code for the menu items:
<div class="hfe-has-submenu-container"><a href="https://swamprabbitmedia.com/Sandbox/EasyReads/target-audience/" itemprop="url" class = "hfe-menu-item">Target Audience<span class='hfe-menu-toggle sub-arrow hfe-menu-child-0'><i class='fa'></i></span></a></div>
<ul class="sub-menu">
<li id="menu-item-2518" itemprop="name" class="anchor menu-item menu-item-type-custom menu-item-object-custom hfe-creative-menu"><a href="https://swamprabbitmedia.com/Sandbox/EasyReads/target-audience/#adultReaders" itemprop="url" class = "hfe-sub-menu-item">Adult Readers</a></li>
<li id="menu-item-2519" itemprop="name" class="anchor menu-item menu-item-type-custom menu-item-object-custom hfe-creative-menu"><a href="https://swamprabbitmedia.com/Sandbox/EasyReads/target-audience/#YAReaders" itemprop="url" class = "hfe-sub-menu-item">Young Adult Readers</a></li>
<li id="menu-item-2520" itemprop="name" class="anchor menu-item menu-item-type-custom menu-item-object-custom hfe-creative-menu"><a href="https://swamprabbitmedia.com/Sandbox/EasyReads/target-audience/#childReaders" itemprop="url" class = "hfe-sub-menu-item">Children’s Books</a></li>
</ul>
And this is the code for one of the anchored sections (they are all set up the same with the appropriate IDs:
<section class="elementor-section elementor-top-section elementor-element elementor-element-3382a2a elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="3382a2a" data-element_type="section" id="adultReaders" data-settings="{"background_background":"classic"}">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-a017930" data-id="a017930" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-ad6bbb4 elementor-widget elementor-widget-image" data-id="ad6bbb4" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img fetchpriority="high" decoding="async" width="800" height="533" src="https://swamprabbitmedia.com/Sandbox/EasyReads/wp-content/uploads/2024/11/istockphoto-1516342726-1024x1024-1.jpg" class="attachment-large size-large wp-image-895" alt="TESOL resources" srcset="https://swamprabbitmedia.com/Sandbox/EasyReads/wp-content/uploads/2024/11/istockphoto-1516342726-1024x1024-1.jpg 1024w, https://swamprabbitmedia.com/Sandbox/EasyReads/wp-content/uploads/2024/11/istockphoto-1516342726-1024x1024-1-300x200.jpg 300w, https://swamprabbitmedia.com/Sandbox/EasyReads/wp-content/uploads/2024/11/istockphoto-1516342726-1024x1024-1-768x512.jpg 768w" sizes="(max-width: 800px) 100vw, 800px" /> </div>
</div>
<div class="elementor-element elementor-element-9ff7265 elementor-align-left elementor-widget elementor-widget-button" data-id="9ff7265" data-element_type="widget" data-widget_type="button.default">
<div class="elementor-widget-container">
<div class="elementor-button-wrapper">
<a class="elementor-button elementor-button-link elementor-size-sm" href="https://swamprabbitmedia.com/Sandbox/EasyReads/young-adult-hi-lo-books/">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-icon">
<i aria-hidden="true" class="far fa-arrow-alt-circle-right"></i> </span>
<span class="elementor-button-text">Explore Adult Titles</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-c8e2148" data-id="c8e2148" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-8d18f73 elementor-widget elementor-widget-heading" data-id="8d18f73" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h2 class="elementor-heading-title elementor-size-default">Easy Read Books For Adult Readers</h2> </div>
</div>
<div class="elementor-element elementor-element-fccaff3 elementor-widget elementor-widget-text-editor" data-id="fccaff3" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>Adults who struggle with literacy can use My Easy Read Books to enhance their reading skills without feeling overwhelmed. These books are ideal for:</p><ul><li><strong>Multi-lingual Learners:</strong> Individuals learning English as a second language benefit from simplified vocabulary and engaging stories that build confidence in reading comprehension.</li><li><strong>Reluctant Readers:</strong> Adults who have avoided reading due to difficulty or lack of interest can find topics that resonate with them, fostering a renewed enthusiasm for books.</li><li><strong>Adult Education Programs:</strong> Educators in literacy initiatives use these books to provide accessible material that supports skill-building and lifelong learning.</li></ul> </div>
</div>
</div>
</div>
</div>
</section>
I have tried using a relative links on the page in question (i.e. #adultReaders) as opposed to the full URL. I have tried using the following JavaScript code:
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
Nothing seems to work.
I should note that I have another set of buttons on the same page that link to the same anchored sections using relative URLs (i.e. #adultReaders). These links work as expected. Only the ones in the primary navigation menu are causing the issue.
If you would like to explore the behavior, you can visit the page @ https://swamprabbitmedia.com/Sandbox/EasyReads/target-audience/. The links at issue are located in the main navigation menu under 'Target Audience'.
Any help you can provide would be greatly appreciated.
After disabling JavaScript, the page anchors worked perfectly, no page reloading. This means there's a JavaScript event listener somewhere that is firing when a link in the primary nav is clicked on, and causing the page to reload. Find that function, review its intended purpose. If it's safe to do so, remove it, or adjust it's logic.