Центр viewport на div, а не div in viewport

Question

Я создаю список с автоматическим переполнением. В настоящее время, когда щелкнут список, он расширяется, чтобы показывать больше контента через jquery. Когда он делает это с элементом списка, который первоначально находится под окном просмотра экрана, он поднимается вверх, и вам нужно прокрутить, чтобы увидеть, что вы нажали. Есть ли способ удерживать экран от перемещения или сосредоточиться на элементе, который был нажат, чтобы он оставался в поле зрения?

Кода ниже:

 $('.expand').click(function() { 
       $(".expanding-tab").hide(); 
       $(this).siblings('.expanding-tab').toggle(); 
       $('.main-tab').removeClass('tab-highlight'); 
       $(this).children('.main-tab').toggleClass('tab-highlight'); 
     }); 

Answer 1

код приведен ниже основан исключительно на this link, в котором предлагается способ для прокрутки вида браузера к положению элемента. Он содержит некоторые мелкие хитрости, чтобы удовлетворить вопрос, который был аскек. Я также подробно прокомментировал код, поскольку ссылка не имеет строгого объяснения.

// jQuery.fn is shorthand for jQuery.prototype and allows 
// for the extension of the jQuery function set with 
// custom functions. 
// See: http://stackoverflow.com/questions/4083351/what-does-jquery-fn-mean 
jQuery.fn.scrollView = function() { 
    return this.each(function() { 
     // This gives us the amount of pixels that is between 
     // the element and the top of the window. 
     var margin_top = jQuery(this).offset().top 

     // Here you can define an offset that leaves some space at the top 
     // of the element 
     var offset = 10px; 

     // Calling .animate() on the body and html objects 
     // makes the transition of these elements smooth (the duration 
     // of the transition is provided in the second argument in ms) 
     jQuery('html, body').animate({ 
      // Setting the scrollTop property makes the page scroll 
      // upwards by the specified amount pixels. 
      // Setting scrollTop to margin_top makes the page scroll up 
      // the exact amount of pixels to make the element appear 
      // at the top of the window. 
      scrollTop: margin_top + offset 
     }, 200); 
    }); 
} 

После добавления этой функции в прототип jQuery вы можете теперь называть ее любым желаемым элементом.

// Calling scrollView on the selected element(s) calls the function 
// we defined above and makes the page scroll so that that element 
// is now at the top (with an optional offset) 
jQuery('#my-element').scrollView(); 

Наконец, это то, как вы бы добавить его как событие OnClick к вашему элементу:

// Bind an onClick event listener to all elements with the 'expand' class 
jQuery('.expand').click(function(event) { 
    // Optionally you can use preventDefault() if it fits your needs 
    event.preventDefault(); 

    // Call the scrollView function on the clicked element 
    jQuery(this).scrollView(); 
});