I am trying to design a website. I decided to work with this template from templatemo.

I am currently trying to add a reference to a specific part of the website (e.g. Contact) in the "normal text area". I tried to just add a href in the text, like this:

Contact me via the <a href="#contact_form" >Contact Form</a>

This does not work properly. If I click on the reference, the whole layout is somehow messed up. I assume this is because the click on the link does not trigger the javascript function for the "changing the slide" properly.

My question is now: How can I trigger the javascript functions, for "changing the slide" to a specific part of the page in regular text areas. This animation is already implemented and works properly (e.g. it is triggered when clicking on the buttons in the navigation bar). However, I have no clue how to use the same animation for jumping to a part of the page outside of the navigation bar.

I hope you understand my problem. Thank you in advance for your support!

CodePudding user response：

Ideally, you would have to modify the page contents in the respective location in the HTML file. The way this file is constructed is that you have a ul list with li elements that indicate each page, and each li element is given a numerical value that represents its position in the list (e.g. 1, 2, 3, ...). Make sure to edit and add any new pages in this part of the markup. If you want to adjust or trigger any page transitions, edit the data-no value in the <a> tag in #tmNavbar to the position of the page in the list.

If you want to trigger the transition from elsewhere in the website, I would recommend just clicking on the respective nav-item using Javascript. For example,

$('.nav-item').get(i).click() /* i is the data-no value` */