Vaadin 7.6.1. + smooth scrolling

Question

In my app (Vaadin 7.6.1.) I want to use smooth scrolling to anchor. Is it possible animate this scroll with Javascript?

Can you point me in the right direction?

I tried this, but it doesn't work:

DemoUI.java

@Theme("demo")
@JavaScript({"example.js"})
public class DemoUI extends UI {
    @Override
    protected void init(VaadinRequest request) {
    final VerticalLayout vLayout = new VerticalLayout();
    vLayout.setMargin(true);
    setContent(vLayout);
    Button button = new Button("Click Me");
    button.addClickListener(e ->
        Page.getCurrent().getJavaScript().execute(
            "smoothScroll(document.getElementById('anchor'), 2000)");
    );
    vLayout.addComponent(button);
    }

    ...

    VerticalLayout aaa = new VerticalLayout();
    aaa.setId("anchor");
    vLayout.addComponent(aaa);

    ...

}

example.js

function smoothScroll(target, time) {
    // time when scroll starts
    var start = new Date().getTime(),

        // set an interval to update scrollTop attribute every 25 ms
        timer = setInterval(function() {

            // calculate the step, i.e the degree of completion of the smooth scroll
            var step = Math.min(1, (new Date().getTime() - start) / time);

            // calculate the scroll distance and update the scrollTop
            document.body['scrollTop'] = (step * target.offsetTop);

            // end interval if the scroll is completed
            if (step == 1) clearInterval(timer);
        }, 25);
}

Answer 1

This works:

DemoUI.java
@Theme("demo")
@JavaScript({"example.js"})
public class DemoUI extends UI {
    @Override
    protected void init(VaadinRequest request) {
    final Panel panel = new Panel();
    panel.setId("panelScroll");
    setContent(vLayout);

    final VerticalLayout vLayout = new VerticalLayout();
    vLayout.setMargin(true);
    panel.setContent(vLayout);

    Button button = new Button("Click Me");
    button.addClickListener(e ->
        Page.getCurrent().getJavaScript().execute(
        "smoothScroll('panelScroll', 'anchor')");
    );
    vLayout.addComponent(button);
    }

    ...

    VerticalLayout aaa = new VerticalLayout();
    aaa.setId("anchor");
    vLayout.addComponent(aaa);

    ...

}

example.js

function smoothScroll(panelID, targetID) {

    var time = 800
    var panel = document.getElementById(panelID)
    var target = document.getElementById(targetID)

    var panelChildren = panel.childNodes;
    var panelSub = panelChildren[1];
    var startScroll = panelSub.scrollTop;

    // time when scroll starts
    var start = new Date().getTime(),

    // set an interval to update scrollTop attribute every 25 ms
    timer = setInterval(function() {
        // calculate the step, i.e the degree of completion of the smooth scroll
        var step = Math.min(1, (new Date().getTime() - start) / time);

        panelSub.scrollTop = startScroll + (step * target.offsetTop);
        // document.body['scrollTop'] = (step * target.offsetTop);

        // end interval if the scroll is completed
        if (panelSub.scrollTop > target.offsetTop) {
            panelSub.scrollTop = target.offsetTop
            clearInterval(timer);
        }
    }, 25);
}

Answer 2

There is a complete implementation of the animated scrolling on github

https://github.com/zero11it/vaadin-animatedscrollintoview

Also I would check

https://vaadin.com/api/7.6.0/com/vaadin/server/Scrollable.html#setScrollTop(int)

how does it work on the client side, because default vaadin scrolling to component doesnt animate.