页面不应该在“更多”按钮单击时返回到顶部

Question

I have a JSP page which has JQuery mobile implementation, on the page load 8 products are shown and a "MORE" button it provided at the bottom, on click of the "MORE" button 8 more products will be populated, but when I click on "MORE" button 8 new products are loaded and the page goes to the top which is not correct. So, how can I prevent the page to go back to the top?

Answer 1

I'd assume your jQuery click handler looks something like this:

$('.more').click(function(e) {
    loadMore();
    // ...
});

By default the click event will still bubble up to the browser, and perform its default event: following the link href (#).

To prevent this, change your code to:

$('.more').click(function(e) {
    e.preventDefault();

    loadMore();
    // ...
});

http://api.jquery.com/event.preventDefault/