End of Support for Joomla 3 - Forum closed

[SOLVED] Menu anchor in page

Menu anchor in page was created by dimrigas

Posted 8 years 7 months ago #13533
Hello,
I would like to anchor a menu item to a specific module in the page, that is when I click on a menu choice to scroll down in the page to a specific position. I tried to create a menu item as an External URL and set link to #'position of the module' but with no success. It seems like Id element is missing from the html code. What is the correct way of achieving this?

Thank you

Please Log in or Create an account to join the conversation.

Replied by joomlaplates on topic Menu anchor in page

Posted 8 years 7 months ago #13535
Hi there,
a "scrollto" funtion is not included in this theme.
You have to add your own "anchor" or "id" to the php file > layouts/theme.php where you want to scroll to.
If you are using a custom module you can add an "id" to the module in html modus.

And then you should add this script to the PHP file > layouts/theme.php to use the function from menu item:

<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top-70}, 900);
});
});
</script>


Attachment scroll-to-script.jpg not found



And now you have to use a menu item class to make them scroll:

Attachment scroll.jpg not found

Last Edit:8 years 7 months ago by joomlaplates
Attachments:
Last edit: 8 years 7 months ago by joomlaplates.

Please Log in or Create an account to join the conversation.

Replied by dimrigas on topic Menu anchor in page

Posted 8 years 7 months ago #13540
Thanks, it works fine!
Is there a way to control the speed of the scrolling?

Please Log in or Create an account to join the conversation.

Replied by joomlaplates on topic Menu anchor in page

Posted 8 years 7 months ago #13541
Change the "900" at the script, this is the speed in milli seconds

<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top-70}, 900);
});
});
</script>

Last Edit:8 years 7 months ago by joomlaplates
Last edit: 8 years 7 months ago by joomlaplates.
The following user(s) said Thank You: dimrigas

Please Log in or Create an account to join the conversation.

Replied by dimrigas on topic [SOLVED] Menu anchor in page

Posted 8 years 7 months ago #13545
Problem solved.

Please Log in or Create an account to join the conversation.

Moderators: joomlaplates

Installations-Service

Don´t waste your time, we install your purchased Template
with the "Demo Content" within the next 24 hours.

Buy Now - 59€

Joomlaplates/Theme-Point is not affiliated with or endorsed by Open Source Matters or the Joomla! Project

Copyright © 2024 JoomlaPlates | Professional Joomla Templates with Uikit 3

Disclaimer & Privacy | License