Question

In my webpage, I am using a vertical accordion in the centre to list some contents. When the page is loaded, the accordion is in the middle. But when a user clicks on the accordion tab, the whole page scrolls up, making the accordion tab to be on the top of browser. How can I avoid this reaction. I want users to stay on the page part itself with out having an automatic scroll. Is there any solution?

When the user clicks on the accordion tab, the page URL becomes,
http://web.com/#tab_1. But I cant remove the id from accordion as it needs ID for functioning. Any other solution?

Answer 1

In your click handler, you should prevent the default action for clicking the links (namely, scrolling to the anchor). Some pseudocode since I don’t know how your accordion is set up:

$("#accordion a").click(function(e)) {
  e.preventDefault(); // This prevents the scrolling from occuring
  $("#accordion").activate($(this).attr('id'));
});