How can I create a smooth scroll Back to Top Button in Webflow for long pages or for when I want to add a modern feature that only appears once the visitor has scrolled down a bit? Can you provide an example?

To create a smooth scroll "Back to Top" button in Webflow, you can follow these steps:

Step 1: Design and add the button
Design and add a button element to your page. You can style it as you wish to match your overall design. Give it a class name, such as "back-to-top-btn."

Step 2: Create an interaction
Select the button element, go to the Interactions panel, and click on the "+ New Interaction" button. Choose the scroll trigger "While page is scrolling."

Step 3: Set up scroll trigger
In the Interaction panel, click on the "Scroll into view" field. Select the element(s) on your page you would like the button to appear after scrolling.

For example, if you want the button to appear after the user scrolls down 500px, you can add a Div element and set its height to 500px, then select that Div element as the scroll trigger.

Step 4: Set initial state
By default, the button should be hidden when the page loads. In the Initial appearance section, set the opacity to 0.

Step 5: Set scroll in and scroll out animations
In the While scrolling section, create an animation for the button's appearance. For example, you can set the opacity to 100% and apply any other animation properties like scale or move.

Next, create an animation for the button's disappearance. Set the opacity back to 0 or animate any other properties to hide the button smoothly.

Step 6: Scroll to top functionality
To enable the smooth scroll to the top functionality, you'll need custom code. Add an HTML embed element to your page where you want to place the button.

Paste the following code inside the HTML embed:

```javascript

```

This code selects the back-to-top button element and adds a click event listener. When the button is clicked, it will smoothly scroll the page to the top.

Step 7: Publish and test
Publish your Webflow site and test the "Back to Top" button by scrolling down the page. The button should appear after reaching the scroll trigger point, and clicking it should smoothly scroll back to the top of the page.

Make sure to preview and test your website on different devices and browser sizes to ensure the smooth scroll functionality works as expected.

That's it! You now have a smooth scroll "Back to Top" button in Webflow that appears when the visitor scrolls down and allows them to easily navigate back to the top of the page.