Anchor

CMS anchor links and sections
Scroll
Scroll
Scroll
Scroll
Scroll

Use cases

Create anchor links that scroll to items in your Collection List
You have a lot of data in your list and want to add anchor scrolling between sections.
Create interfaces for large data
Create menu systems, FAQ components, work with Webflow Interactions to change menu visibility, customize to the max amount.

How to use it

Paste before </body> tag of the page you're working with.

<!-- F'in sweet CMS Library for Webflow -->
<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>

Copy code

Code explanation

fsAnchor

The variable we created to store our Library instance. The name of the variable can be set to whatever you want.

new FsLibrary

The class of the hidden Collection List that holds our dynamic CMS List.

anchorButton

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.

anchorId

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.

buttonsTarget

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.

activeClass

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.

Explanation of options, classes, and how it works
new FsLibrary

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~.

anchorButton

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~

anchorId

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".

buttonsTarget

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~

activeClass

The active class that is added to the anchorButton when its section is in view.