Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

TUTORIALVaadin lets you build secure, UX-first PWAs entirely in Java.
Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Calling javascript synchronously by Enver Haase, 1 month ago
Vaadin 7.6.1. + smooth scrolling
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
@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);
}
Last updated on
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);
}
Last updated on
You cannot reply to this thread.