this code fixes the page to page #example anchor link doesn’t go/scroll to the section/container automatically problem.
it is not really a fix but more like forcing the browser window to go to the section actually 🙂
this problem happening because of the browser not related to any builder or wordpress it is just a browser issue.
just load this javascript on all pages or the pages you will need. it will work for any anchor link any page no setup needed. all dynamic.
// Check if the URL contains the section ID
const sectionID = window.location.hash.substring(1);
if (sectionID) {
// Function to animate scrolling to the section with the specified ID
function scrollToSection() {
const section = document.getElementById(sectionID);
if (section) {
const sectionOffset = section.getBoundingClientRect().top;
const currentScroll = window.pageYOffset;
const targetScroll = currentScroll + sectionOffset;
const duration = 1000; // Animation duration in milliseconds
const startTime = performance.now();
function scrollAnimation(currentTime) {
const elapsedTime = currentTime - startTime;
const scrollProgress = Math.min(elapsedTime / duration, 1);
const easedProgress = easeOutCubic(scrollProgress);
const scrollTo = currentScroll + (sectionOffset * easedProgress);
window.scrollTo(0, scrollTo);
if (elapsedTime < duration) {
requestAnimationFrame(scrollAnimation);
}
}
function easeOutCubic(t) {
return (t - 1) * Math.pow(t, 2) + 1;
}
requestAnimationFrame(scrollAnimation);
}
}
// Wait for the page to finish loading
window.addEventListener("load", scrollToSection);
}
Improved Version v2
Improvement list;
Use of Arrow Functions and Early Returns: Converted functions to arrow functions for cleaner and more concise code. Added an early return if the section is not found, making the code more robust.
Easing Function Optimization: Moved the easeOutCubic function outside the inner function so it’s defined only once, reducing unnecessary redefinitions on each scroll.
Removal of Unused Variables: Removed the unused targetScroll variable to simplify the code.
Event Listener Change: Changed the event from "load" to "DOMContentLoaded". This fires as soon as the DOM is ready (without waiting for all images and resources), which often provides a smoother user experience. If your layout depends on images or external resources, you might prefer "load".
// Check if the URL contains a section ID
const sectionID = window.location.hash.substring(1);
if (sectionID) {
// Easing function moved outside the scroll function so it isn’t redefined on every call.
const easeOutCubic = t => (--t) * t * t + 1;
// Function to animate scrolling to the section with the specified ID
const scrollToSection = () => {
const section = document.getElementById(sectionID);
if (!section) return; // Exit early if the section doesn't exist
const sectionOffset = section.getBoundingClientRect().top;
const currentScroll = window.pageYOffset;
const duration = 1000; // Animation duration in milliseconds
const startTime = performance.now();
// Arrow function for scroll animation
const scrollAnimation = currentTime => {
const elapsedTime = currentTime - startTime;
const scrollProgress = Math.min(elapsedTime / duration, 1);
const easedProgress = easeOutCubic(scrollProgress);
const newScrollPosition = currentScroll + sectionOffset * easedProgress;
window.scrollTo(0, newScrollPosition);
if (elapsedTime < duration) {
requestAnimationFrame(scrollAnimation);
}
};
requestAnimationFrame(scrollAnimation);
};
// Use DOMContentLoaded to trigger the scroll as soon as the DOM is ready.
window.addEventListener("DOMContentLoaded", scrollToSection);
}