Javascript 瓦丁7.6.1+；平滑滚动

在我的应用程序（Vaadin 7.6.1.）中，我想使用平滑滚动来定位。 是否可以使用Javascript设置此卷轴的动画

你能给我指一下正确的方向吗

我试过这个，但不起作用：

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);
}

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);
}

---

github上有一个完整的动画滚动实现

我还要检查一下

它在客户端是如何工作的，因为默认的vaadin滚动到组件不会产生动画

这是有效的：

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(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);
}

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);
}