How to use turbo_frame_tag and anchors?

rubyonrails-talk
1

Is it possible to scroll to a loaded partial within a turbo_frame_tag?

The flow opens different panes based on a query parameter. The problem is that the pane opens below the fold. I was wondering if it’s possible to scroll to the specific partial after it’s loaded using Turbo or if there is any workaround?

1 Like
2

You can fix this with a Stimulus controller:

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  connect() {
    this.element.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}

And you can set this on your response template:

<div data-controller="scroll-into-view">
  <!-- content -->
</div>

When the element connects it will scroll.

Alpine.js users can do this with:

<div x-init="$el.scrollIntoView({ behaviour: 'smooth', block: 'start' })" >
  <!-- content -->
</div>
1 Like