https://ewarbirds.org/wp-content/themes/C8--Child/src/js/scroll-to-top.js

1(function(){
2
3    // scroll-to-top.js - anchor link offsetTop 
4    window.scrollOffsetConfig = {
5        breakpoint: 1024,
6        offsetMobile: 50,
7        offsetDesktop: 150    
8    };
9
10
11    var links = document.querySelectorAll('a[href^="#"], a[href^="/#"]');
12    if (!links.length) return;
13
14    // Iterate through each anchor link using the modern forEach method
15    links.forEach(link => {
16        // Add click event listener to each link
17        // Using arrow function to maintain scope and pass both the event and link element to scroll_to
18        link.addEventListener('click', (e) => scroll_to(e, link));
19    });
20
21    console.log(links);
22
23    function scroll_to(e, link) {
24
25        console.log('scroll_to', link);
26
27        const currentPath = trimSlashes(decodeURIComponent(location.pathname).trim());
28        const linkPath = trimSlashes(decodeURIComponent(link.pathname).trim());
29        const samePath = currentPath === linkPath;
30        const sameHost = location.hostname === link.hostname;
31
32        if (!samePath || !sameHost || !link.hash || link.hash === '#0') return;
33
34        const target = document.querySelector(link.hash);
35        if (!target) return;
36
37
38        e.preventDefault();
39        e.stopImmediatePropagation();
40
41        // Get the absolute position of the element relative to the document
42        // This solution works by getting the bounding client rect of the target element and subtracting the window's scroll position.
43        // This solution solves the issue of target.offsetTop not working correctly with nested elements and returning 0. Solves the issue of anchor elements inside WP Blocks 
44        const rect = target.getBoundingClientRect();
45        const targetOffsetTop = Math.floor(rect.top + window.pageYOffset);
46
47        // Ensure window.scrollOffsetConfig exists and is an object
48        window.scrollOffsetConfig = window.scrollOffsetConfig || {};
49
50        // Destructure values from window.scrollOffsetConfig set via child theme, with fallback defaults
51        const {
52            breakpoint = 1024,
53            offsetMobile = 50,
54            offsetDesktop = 100 
55        } =  window.scrollOffsetConfig;
56
57        // Calculate offset based on viewport width
58        const offset = window.innerWidth >= breakpoint ? offsetDesktop : offsetMobile; 
59    
60        window.scrollTo({
61            top: targetOffsetTop - offset, 
62            behavior: 'smooth'
63        });
64            
65    }
66
67    function trimSlashes(path) {
68        return path === '/' ? path : path.replace(/^\/+|\/+$/g, '');
69    }
70
71}());