Anchor
Use cases
How to use it
Paste before </body> tag of the page you're working with.
<script src="https://cdn.jsdelivr.net/npm/@finsweet/cms-library@1/cms-library.js"></script>
<script>
// immediately/self invoked function. This function executes right away
(function() {
// create a new Library instance and store it in a variable called "fsAnchor"
var fsAnchor= new FsLibrary('.anchor-data-feed') // Class of your CMS collection list
// run anchor on our instance
fsAnchor.anchor({
anchorButton: ".anchor-link-button", // class of the button that will be put in buttonsTarget
anchorId: ".anchor-url-and-section-id", // class of the href #section this anchor button will scroll to
buttonsTarget: ".anchor-put-links-in-here", // class of the div to place the anchorButton
activeClass: "active-link" // class of the active state added to anchorButton
})
})();
</script>
Code explanation
The variable we created to store our Library instance. The name of the variable can be set to whatever you want.
The class of the hidden Collection List that holds our dynamic CMS List.
The class of the <a> element that will serve as the anchor button for the content section.
This can be hidden with display: none within the item.
The class of the text that will be the href of our anchorButton and the id of the sections of our content. anchorId will link our buttons to our section content.
This can be hidden with display: none within the item.
The class of a div that will hold all of the anchorButtons elements generated from our list. Our anchorButton will be placed in this div.
The class of the active state of the anchorButton. When anchorButton is active, the activeClass will be added as an add-on class.
IMPORTANT: You must create a style for this active class inside Webflow. If you set your active state to the class 'active-link' you must create a style in Webflow Designer for active-link.
~activeClass: 'active-link'~
HTML and class setup
IMPORTANT: This is easy to set up. You must understand how to structure your page for this to work.
This is your instance of Library on the page. The instance is on the Collection List of your CMS Collection List. In this example, this is ~.anchor-data-feed~.
This is the button that will be used to anchor scroll to the item in the list. It should be an <a> element with dynamic text in it. We will "copy" this button and "paste" it in the buttonsTarget. Clicking on this button on the published site will scroll to the correct section. In this example, the anchorButton is ~.anchor-link-button~
The id we give to the section and href we give to the button. This is the unique id that will "connect" the anchor buttons and the content in the CMS item. In this example, this is is ~.anchor-url-and-section-id~. If the text of this class was how-to-make-websites, the ~.anchor-link-button~ would get href="#how-to-make-websites" and ~.anchor-dynamic-content~ would get id="how-to-make-websites".
This is where we "paste" the anchorButtons from all of the collection items in our list. If there are 50 items in our list, we will "paste" 50 buttons to the buttonTarget. buttonsTarget should be a div. It can be placed anywhere on the page with any style. In this example, this is ~.anchor-put-links-in-here~
The active class that is added to the anchorButton when its section is in view.