Menu scroll fix

resources/src/js/partials/scripts.js

@@ -106,23 +106,6 @@ $(function () {
     }
 });
 
-// Remove #anchors from browser URL
-$(function () {
-    $('a[href*="#"]:not([href="#"])').click(function () {
-        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
-            var target = $(this.hash);
-            target = target.length ? target : $('[name='+this.hash.slice(1)+']');
-            if (target.length) {
-                $('html, body').animate({
-                    scrollTop: target.offset().top
-                }, 1000);
-            }
-
-            return false;
-        }
-    });
-});
-
 // Geolocate user position
 $(function () {
     $(document).on('click', '[data-control="user-position"]', (event) => {

resources/views/components/category-list.blade.php

@@ -7,7 +7,7 @@
                     href="#category-all-heading"
                 @else
                     href="{{ page_url($menusPage, ['category' => null]) }}"
-                wire:navigate
+                    wire:navigate
                 @endif
             >@lang('igniter.local::default.text_all_categories')</a>
         </li>
@@ -22,7 +22,7 @@
                         href="#category-{{ strtolower(str_slug($category->name)) }}-heading"
                     @else
                         href="{{ page_url($menusPage, ['category' => $category->permalink_slug]) }}"
-                    wire:navigate
+                        wire:navigate
                     @endif
                 >{{ $category->name }}</a>
             </li>

resources/views/includes/menu/grouped.blade.php

@@ -2,7 +2,8 @@
     class="menu-group"
     data-bs-spy="scroll"
     data-bs-target="#navbar-categories"
-    data-bs-root-margin="0px 0px -30%"
+    data-bs-root-margin="80px 0px -80%"
+    data-bs-threshold="[1]"
     data-bs-smooth-scroll="true"
 >
     @forelse ($groupedMenuItems as $categoryId => $menuList)

resources/views/livewire/menu-item-list.blade.php

@@ -64,5 +64,64 @@ class="d-none"
             });
         })
     });
+    $(function () {
+        let scrollSpyTimer = null;
+
+        $(document).on('activate.bs.scrollspy', function (e) {
+            // Reset the timer for "final" activation
+            clearTimeout(scrollSpyTimer);
+
+            scrollSpyTimer = setTimeout(function () {
+                const $nav = $('#navbar-categories');
+                const $active = $(e.relatedTarget);
+
+                if (!$active?.length) return;
+
+                const left = $active.position().left;
+                const right = left + $active.outerWidth();
+
+                if (left < 0 || right > $nav.width()) {
+                    $active[0].scrollIntoView({
+                        behavior: 'smooth',
+                        inline: 'center',
+                        block: 'nearest'
+                    });
+                }
+            }, 250); // Delay tuned: waits for scrolling & anchor snapping to settle
+        });
+
+        // Keep last active nav-link highlighted when no section is in view
+        let lastActive = null;
+        $(document)
+            .on('activate.bs.scrollspy', e => {
+                lastActive = $(e.relatedTarget);
+            })
+            .on('scroll', () => {
+                if (!$('#navbar-categories .nav-link.active').length && lastActive) {
+                    lastActive.addClass('active');
+                }
+            });
+
+        // Smooth scroll to anchor links
+        $('a[href*="#"]:not([href="#"])').click(function (event) {
+            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+                var $target = $(this.hash);
+                $target = $target.length ? $target : $('[name='+this.hash.slice(1)+']');
+                if ($target.length) {
+                    event.preventDefault()
+                    var offset = $('.sticky-top').outerHeight() || 0;
+                    $('html, body').animate({
+                        scrollTop: $target.offset().top-offset
+                    }, 500, function () {
+                        $('[data-bs-toggle="collapse"]:is(.collapsed)', $target).trigger('click');
+                        var spy = bootstrap.ScrollSpy.getInstance($target.closest('[data-bs-spy="scroll"]'));
+                        if (spy) spy.refresh();
+                    });
+                }
+
+                return false;
+            }
+        });
+    });
 </script>
 @endscript