Wicket:告诉浏览器滚动到某个标签(锚点) [英] Wicket: tell the browser to scroll to certain tag (anchor)

问题描述

我们正在使用 Wicket，我们生成的页面很长(很多垂直滚动).一些链接或表单的 onSubmit 方法调用只是对数据库执行一些操作并再次显示相同的页面:

We are using Wicket and our generated pages are quiet long (a lot of vertical scrolling). Some links or form's onSubmit methods invoke just perform some actions on the database and show the same page again:

public class MyPage extends WebPage {

    public MyPage(PageParameters parameters) {
        ....

        final Form<Void> form = new StatelessForm<Void>("formId") {
            protected void onSubmit() {
                // some database stuff
                ...
                setResponsePage(getClass(), getPageParameters());
            }
        };
        ...
    }
}

如何使 setResponsePage 调用导致浏览器滚动到表单，从而使页面不只是显示顶部?也许是一些 JavaScript 注入?

How can I make the setResponsePage invocation cause the browser scroll to the form, so the page is not just showing the top? Maybe some JavaScript-injection?

推荐答案

我认为一个不错的 Wicket-y 解决方案将 Michael 的答案中已有的内容与 Behavior 相结合，因此您只需 <代码>将添加到您的表单中.

I think a nice Wicket-y solution combines stuff that is already in Michael's answer, with a Behavior, so you can just add this to your form.

form.add( new ScrollToTopBehavior()); 

行为本身就像这样:

public class ScrollToTopBehavior extends Behavior
{

    @Override
    public void renderHead( Component component, IHeaderResponse response )
    {
        super.renderHead( component, response );
        response.render( JavaScriptHeaderItem.forReference( Application.get().getJavaScriptLibrarySettings().getJQueryReference() ) );

        component.setOutputMarkupId( true );

        String script = String.format("doSomeJavaScriptStuff('%s')", component.getMarkupId());
        response.render( OnDomReadyHeaderItem.forScript( script ) );
    }
}

更新:

要仅滚动到特定 ID/ANCHOR 一次，您可以按照以下答案进行操作:https://stackoverflow.com/a/3163635/461499

For scrolling to a specific ID / ANCHOR only once, you can follow this answer: https://stackoverflow.com/a/3163635/461499

这篇关于Wicket:告诉浏览器滚动到某个标签(锚点)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！