Vaadin 7.6.1. + smooth scrolling

Vaadin 6 / 7 / 8
1

Hello,

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

[code]
@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);

...

}
[/code]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);
}
2

This works:

DemoUI.java

[code]
@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);

...

}
[/code]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);
}