Wicket 6 - Prevent jQuery call scrolling page to top using AjaxCallListener

Question

Within my Wicket (6.27) page, I have an AjaxLink. Within this AjaxLink I use an AjaxCallListener to call some javascript to display and his a spinner div that fills the page. The Javascript is a simple addClass/removeClass call.

When calling this addClass/removeClass the page scrolls to the top. This is undesirable. I know that the addClass / removeClass is to blame for the scrolling as when I remove these, everything is fine.

How do I prevent the page from scrolling on link click in my situation?

Code snippets below:

The link in html:

<a wicket:id="do-things-link" class="do-things-link" href="javascript:void(0)">Do The Things</a>

The link in the code:

final AjaxLink link = new AjaxLink(WICKET_ID_THE_LINK)
{
    @Override
    protected void updateAjaxAttributes(AjaxRequestAttributes attributes) {
        super.updateAjaxAttributes(attributes);
        attributes.getAjaxCallListeners().add(new GlobalSpinnerListener());
    }

    @Override
    public void onClick(AjaxRequestTarget target)
    {
        doSomething(target);
    }
};

The AjaxCallListener - GlobalSpinnerListener class (where customScriptReference is my js code, shown after):

@Override
public CharSequence getBeforeHandler(Component component) {
    return ";displayGlobalSpinner();";
}

@Override
public CharSequence getCompleteHandler(Component component) {
    return ";hideGlobalSpinner();"
}

@Override
public void renderHead(Component component, IHeaderResponse response) {
    ResourceReference jqueryReference =
            Application.get().getJavaScriptLibrarySettings().getJQueryReference();
    response.render(JavaScriptHeaderItem.forReference(jqueryReference));
    response.render(JavaScriptHeaderItem.forReference(customScriptReference) );
}

And the js code:

function displayGlobalSpinner() {
    $('#global-page-activity-indicator').addClass('on');
}

function hideGlobalSpinner() {
    $('#global-page-activity-indicator').removeClass('on');
}

The global spinner is found in the html under other content in the body:

<div id="global-page-activity-indicator" class="am-loading-spinner">

And the css for that class is this:

/* Absolute Center Spinner */
.am-loading-spinner {
   display: none;
   position: fixed;
   z-index: 9999;
   height: 2em;
   width: 2em;
   overflow: visible;
   margin: auto;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
 }

.am-loading-spinner.on {
  display: block;
}

/* Transparent Overlay */
.am-loading-spinner:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

Answer 1

What do you do exactly on doSomething(target); ? It could be you add some component to the target, it will be new rendered and replaced in markup, then you get a "top scrolled page".