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 (5)
The Metronic Auto-Scroll feature enables smooth navigation by automatically scrolling to the selected menu item. This enhances user experience, ensuring quick and intuitive access to specific sections of the page. winpkrapk.com
To make the menu scroll to the active element, you can use scrollIntoView() after setting the active link. For example:
var menuElement = document.getElementById("kt_app_sidebar_menu");
var menu = KTMenu.getInstance(menuElement);
var activeLink = menu.getLinkByAttribute("12345");
menu.setActiveLink(activeLink);
activeLink.scrollIntoView({ behavior: "smooth", block: "center" });
This ensures the active menu item is automatically gladihoppers centered in the scrollable area for better visibility.
Trong mã HTML thanh bên, bạn có thể thá» di chuyển thuá»™c tính id đến phần tá» con vá»›i lá»›p hover-scroll-y. Äiá»u này sẽ cho phép tá»± Ä‘á»™ng cuá»™n đến liên kết Ä‘ang hoạt Ä‘á»™ng khi tải trang. run 3
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.
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.
