Is there a way to scroll to the top of a section in Webflow when a checkbox is clicked?

Published on
September 22, 2023

Yes, there is a way to scroll to the top of a section in Webflow when a checkbox is clicked. You can achieve this by combining some custom code with Webflow's interactions feature. Here's a step-by-step guide on how to do it:

  1. First, make sure you have a section on your page that you want to scroll to the top of when the checkbox is clicked.

  2. Next, add a checkbox element to your page and give it a class name. For example, you can give it a class name of "scroll-top-checkbox".

  3. Now, let's add some custom code to scroll to the top when the checkbox is clicked. Go to the Project Settings in Webflow, click on the Custom Code tab, and then go to the Footer Code section.

  4. In the Footer Code section, paste the following code:

<script>document.addEventListener('DOMContentLoaded', function() {  var checkbox = document.querySelector('.scroll-top-checkbox');  checkbox.addEventListener('click', function() {    var section = document.querySelector('.your-section-class'); // Replace "your-section-class" with the actual class name of your section    window.scrollTo({      top: section.offsetTop,      behavior: 'smooth'    });  });});</script>
  1. Replace ".your-section-class" in the code with the actual class name of your section. Make sure you include the dot (.) before the class name.

  2. Save the changes and publish your site.

  3. Now, go back to your Webflow Designer and select the checkbox element. Open the Interactions panel, click on the plus (+) button to create a new interaction, and choose the "Element trigger" option.

  4. In the Element trigger settings, select the "Click/ Tap" option and choose the checkbox element.

  5. Next, click on the plus (+) button to add a new action. Choose the "Run JavaScript" option.

  6. In the JavaScript code field, enter the following code:

scrollToTopSection();
  1. Click on the "Save & Close" button to save the interaction.

  2. Preview your site and test the checkbox. When the checkbox is clicked, it should smoothly scroll to the top of the section you specified.

By following these steps, you can easily scroll to the top of a section in Webflow when a checkbox is clicked.