Anchor-like functionality in Vaadin to jump/scroll to a certain point

Question

Is there a way in vaadin to scroll or jump to a certain point (e.g. a Label) inside a view (e.g. a Panel)when a button or link component is clicked? Similar to the anchors functionality on a website?

I'm using Vaadin 7.5.9

EDIT: I have a HorizontalSplitPanel. Its first component is a list of items where a user can make a selection. Is an item selected the second component of the HorizontalSplitPanel opens. The second component consists of a VerticalLayout containing a heading and a menu and a Panel. If there is a selection in the menu the Panel should be scrolled to the referred entry.

Arch

Answer 1

There's an API on the UI class called scrollIntoView(Component). This is how one calls it

private Label result;

public void scrollToResult() {
  UI.getCurrent().scrollIntoView(result);
}

Vicentevicepresident

Thank you. It does what I want to achive, but not exactly. I have a VerticalLayout in the second component of a HorizontalSplitPanel. The VerticalLayout contains some content and a Panel. Within this Panel I want to jump to a certain "anchor". Using your suggested method unfortunately also scrolls the second component of the HorizontalSplitPane and not just the content of the Panel, which is what I'd like to achieve. Any suggestion for that, please? – Arch

Try to use a Link pointing to a fragment, and give the ID to the component via .setId(String) – Vicentevicepresident

Do you mean like that? Link link = new Link("LinkText", new ExternalResource("#destinationID")); and for destination component destComp.setId("destinationID");? Because that didn't work for me as my url is similar to .../start#actualContent. – Arch

Thanks for your help. I was able to solve the issue. I needed to correct my setExpandRatio settings – Arch

In later version of Vaadin the scrollIntoView method is not present. Is there a way to do this in newer version of Vaadin? – Luben

Answer 2

You can also execute JS code from your Java Vaadin code to scroll to a Component.

UI.getCurrent().getPage().executeJs("arguments[0].scrollIntoView(true);", componentToScrollTo);

Luben