Interaction show container and scroll to it. How?

How To
1

I have a button with an interaction that reveals a container lower on the page. I would like the button to also scroll to the container when clicked.

Any ideas on how this is achieved?

2

Hey Mike,

I think this is not possible using interactions at the moment. But you can achieve this with some basic JS instead. I created a small screencast to demonstrate.

And this is the custom code I used:

<script>
const button = document.getElementById('toggle-button')
const section = document.getElementById('second-section')
button.addEventListener('click', () => {
  section.classList.remove('hidden')
})
</script>

Let me know if that helps.

Best,

André

3

Hey Andre

I did get there with a mixture of an interaction, a short script in a code block and using an empty div for the anchor. But your solution looks more elegant. So I will set this up tomorrow when I am back at my desk and let you know how I get on.

fyi my script

function myFunction() {
  const element = document.getElementById("roasters");
  element.scrollIntoView();
}

Thanks a million for taking the time to do the screencast and answer my question.

cheers
Mike