When i add a div element to the page it loose focus an scroll to top

Question

I have a link when its clicked a div containing form elements are added to the page. The problem is when the list become longer. when i add an element to the end of the page, the page focus back to the top making the user to scroll back to the end of the page. How can I prevent it? I tried to use $(this).focus(); but it didn't work.

$("a[id^=link_add_section_]").live('click',function() { // create a section

                var sectionId = $(this).attr('id');
                var sectionIdSplit = sectionId.split('_');
                addSection(sectionIdSplit[3],'groupby');
                $(this).focus();
                alert(1);
});

Answer 1

Add an id to your anchor

<a href="#something" id="myAnchor">Something</a>

Bind a click event and prevent default

$("#myAnchor").click(function(event){
  event.preventDefault();
  return false;
});

Answer 2

如果您将“ new_div_1”作为新添加的div的ID，并将焦点移至新添加的div，则可以

$("body").animate({ scrollTop: $('#new_div_1').offset().top }, 1000);

Answer 3

尝试将窗口滚动到该div的位置：

 window.scrollTo(0,$("#MY_DIV").offset().top);