How can I set up anchor links and scroll to specific sections in Webflow, with the right div having overflow scroll, and the corresponding link highlighted when a section is in view?

To set up anchor links and scroll to specific sections in Webflow, while also highlighting the corresponding link when a section is in view, you can follow these steps:

1. Set up your sections: In the Webflow Designer, create the sections or divs that you want to scroll to. Give each section a unique ID. You can do this by selecting the section and going to the "Settings" panel on the right-hand side. In the "Element Settings" tab, under "Attributes," add a unique ID to the "ID" field.

2. Create the navigation menu: Create a navigation menu or any other element that will serve as the anchor links. Add link elements or buttons for each section you want to scroll to. Give each link a unique class or ID.

3. Add custom code: Webflow's built-in interactions don't have an option to highlight the corresponding link when a section is in view. To achieve this, you'll need to use custom code.

a. Go to the Webflow Designer and select "Project Settings" from the top-right menu.
b. In the "Custom Code" tab, select "Header Code" and add the following code:

  \`\`\`  <script src="<https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js>"></script>  <script>  $(document).ready(function() {      $(window).scroll(function() {          var scrollTop = $(window).scrollTop();          $('section').each(function() {              var elementTop = $(this).offset().top;              if (scrollTop >= elementTop) {                  var sectionId = $(this).attr('id');                  $(".your-link-class").removeClass("active");                  $(".your-link-class[data-section='" + sectionId + "']").addClass("active");              }          });      });  });  </script>  \`\`\`    Note: Replace ".your-link-class" with the class or ID of your link elements, and make sure to update the jQuery library link if needed.

4. Add custom styles: With the code above, you're adding an "active" class to the corresponding link when a section is in view. Now you need to define the styles for the active link.

a. In the Webflow Designer, go to the "Custom Code" tab in "Project Settings."
b. Select "Head Code" and add the following code:

  \`\`\`css  <style>  .your-link-class.active {      /\* Add your active link styles here \*/  }  </style>  \`\`\`    Replace ".your-link-class" with the class or ID of your link elements, and define the styles you want for the active link.

5. Link the anchors: Now you need to update the link elements or buttons to scroll to the corresponding section when clicked.

a. Select a link element or button.
b. In the "Settings" panel, under the "Link Settings" tab, click the "+" button next to "URL" to add a custom URL.
c. In the "URL" field, enter the ID of the section you want to scroll to, preceded by a "#". For example, if your section ID is "section1", enter "#section1".

Repeat step 5 for each link element or button, linking them to their corresponding sections.

That's it! Now when you scroll, the corresponding link in the navigation menu should be highlighted, and clicking each link will smoothly scroll to its corresponding section.