Metronic Auto-Scroll to menu-item
Hi!
I am using version 8.2.2 - demo39 template. If there are many elements, then it is necessary to scroll, but there is no automatic transition to the active one.
If you reduce the size of the screen this can be viewed at -
https://preview.keenthemes.com/metronic8/demo39/widgets/feeds.html
After loading the page, you need to scroll to "Feeds"
To select the active element, I use -
var menuElement = document.getElementById("#kt_app_sidebar_menu");
var menu = KTMenu.getInstance(menuElement);
var activeLink = menu.getLinkByAttribute("12345");
menu.setActiveLink(activeLink);Please tell me what needs to be added so that the menu scrolls to the active element?
P.S. In Demo1 Everything works.
Replies (2)
Hi,
Thanks for the feedback.
In the sidebar HTML code can you try to move id attribute to the child element with class hover-scroll-y. This should enable the auto scroll to the active link on the page load.
Regards.
Here's how you can modify your code:
javascript fnaf
Copy code
var menuElement = document.querySelector("#kt_app_sidebar_menu"); // Use querySelector instead of getElementById
var menu = KTMenu.getInstance(menuElement);
var activeLink = menu.getLinkByAttribute("12345");
menu.setActiveLink(activeLink);
// Scroll to the active element
if (activeLink) {
activeLink.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
This code first sets the active link in the menu and then scrolls to it smoothly using the scrollIntoView method. Make sure to replace "12345" with the actual attribute value of the active link.
This should ensure that the menu automatically scrolls to the active element when the page loads, similar to how it works in Demo1.
