Anchor
Add "bookmarked" sections,or waypoints, to your pages that can be accessed via links. These anchors can also be used in conjunction with the Navigation Bar, Buttons, links and more.
Examples
Anchors
Here we've created a few buttons linking to various locations on this page. In addition to these buttons you can also add unique IDs to the end of this page's URL to visit those same anchor locations. We've listed the IDs below the buttons if you'd like to give them a try.
This is either madness, or brilliance.
Anchor on its own provides a great way to create waypoints on a page that can be accessed via unique IDs in your URLs. These anchored locations can be accessed from this page, or others.
It’s remarkable how often those two traits coincide.
In addition to using anchors via URLs the Anchor tool also works well with Foundry's Navigation Bar, which has an anchor option, as well as other tools such as Scroll To. This greatly increases this little tool's versatility.
Anchors even work within Partitions!
Settings
Edit Mode
Edit Mode Title
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
General
Anchor ID
This is a unique ID for this page that will be used in URLs linking to this page anchor, or by other tools like Scroll To so that that know which anchor to go to.
It is important that this not only be a unique ID, but also that is cannot contain spaces or special characters. In place of spaces we recommend using a dash instead. That said, it is best to keep the Anchor ID as simple as possible.
Offset
Enable Offset
Enabling this feature allows you to offset the location of the anchor from the top of the browser. This is useful when using anchors on a page with a sticky navigation for instance, or when you just want the destination to be offset a bit from the top of the browser window.
Offset
This is the distance you wish to offest the anchor from the top of the browser. This should almost always be a negative number.
HTML Comment
HTML Comment
Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.
Custom
This field allows you to replace the default HTML Comment with your own text.
CSS
Classes
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.