Streaming live at 10am (PST)

Connect the Checkbox with a page element for scrolling

I used the tutorial created by @sabanna to create a filter with Mix It Up.

The issue is that when the content is filtered. The user is scrolled to the end of the page, because the height of the collection changes, followed by height of the section.

Is there a way to scroll to the top of the section (any element, Preferably the Read More button) when a checkbox is clicked.

I searched the forum and looked through the editor but couldn’t find an option to link the checkbox with a page section.

Read Only: https://preview.webflow.com/preview/eternal-andamans?utm_medium=preview_link&utm_source=designer&utm_content=eternal-andamans&preview=51a0dc6a6d689fac96dd89f9d68db871&pageId=5bee60ebe7b02b0410dd4e13&mode=preview

Any kind of help is really appreciated. :pray:

I found something that might work, but don’t know how to implement it:

    $('input').on('ifChecked', function(event) {

   // Fixed scroll target       
   const target = $('#target');

   // For dynamic targets: adjust the target selector like
   // const target = $($(event.target)).attr('name');

   $('html,body').animate({
      scrollTop: target.offset().top
   }, 1000);
});

Is there someone with a bit of experience with this?

Hey there @Arialwal! Thanks for thinking of me to help you out!

Can you please drop this code before the “/body” tag? Let me know if it fits your needs!

<script>
const target = $("#SCROLLED");

function scroll() {
  $("html,body").animate(
    {
      scrollTop: target.offset().top
    },
    1000
  );
}

$("input[type=checkbox]").click(function() {
  if ($(this).prop("checked")) scroll()
});
</script>
1 Like

Yes this worked exactly as I wanted it to be. Thank you so much @Jeandcc :smiley:

1 Like

Great! I’m glad to help