专注于AJAX通话后失去的div

Question

I seem to be facing a strange issue here (at least seems so).

I have a DIV which has a few links (anchors) in it. Clicking a link makes an AJAX call (using jQuery), and the server (Controller) sends an HTML response (in fact, a JSP, via Spring MVC).

Now, this DIV can be reached by scrolling down the page. However, when I click the link within the DIV, I am navigated to the top of the page (the AJAX call doing its job in the background), whereas I expect (WANT) to stay where I was on the page (ie, on that DIV).

How can I control that?

Answer 1

Make sure the href on your links call void(0) and use the onClick attribute for your AJAX function.

<a href="javascript:void(0);" onClick="myFunction();">click me</a>

Not having a value for the HREF attribute causes the page to scroll to the top. Anchors arent necessarily links to other pages, they can link to areas within the page, so if the HREF is blank it will simply go to the top.