How to add a jump event using Javascript on Wordpress

Question

So in short, I have this page I created on a wordpress site. The issue, the content on the page, divided in different rows, is quite large and I wanted to enable on the beguinning of the page a jump to section link (and jump back to top link) for each section (in this case, row).

I'm in doubt, though, on what is the best way to do this on wordpress and wether I shoudl add an even type like scroll to or jump to. Also, I want to create a function that does this to multiple sections... in order to have a neat and simple code, is there any function(s) options you could recomment me to search and try to use?

thank you =)

Answer 1

The easiest way you can create a link to "jump to" a section of the page is with anchor links. This page has an example:

https://www.rapidtables.com/web/html/link/html-anchor-link.html

Notice that the browser URL gets updated when you click the anchor link, this is how you can share links to specific sections of your page.

How to create anchor links in Wordpress (Visual Edit Mode):

1. Begin by adding the anchor tag. This will go on the section header that you want to jump to (ie, the destination of the link). In Wordpress Visual Edit mode, on the right-hand side of the screen you should see an Advanced section. In the "HTML Anchor" field, add your tag. Use dashes (-) instead of spaces. Here's an example: my-section

2. Now create the link to the tag. Highlight the text that will link to the anchor tag. Click the "link" button in the toolbar and add the anchor tag with a pound symbol (#) in front of it. Example: #my-section

Save and publish. Now when you click the link you created in step 2, it should jump you to the section you tagged in Step 1.

For more detailed instructions, please see the Wordpress.com guide: https://wordpress.com/support/splitting-content/page-jumps/