Аккордеон в jQuery резко прокручивает пользователей по странице

Question

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

Примечание. Чтобы демонстрация работала, вам нужно сжать окно, чтобы существовала вертикальная прокрутка.

Fiddle: https://jsfiddle.net/sjek6mx5/

jQuery

$(document).ready(function($){

    $('.tf-expand-trigger').on('click', function(event){
       event.preventDefault();

        var expand = $(this).next('.tf-expand-content');

        $('.tf-expand-content').not(expand).slideUp(400).parent('div').removeClass('content-visible');

        $(this).next('.tf-expand-content').slideToggle(400).parent('div').toggleClass('content-visible');

    });

});

HTML

<div class="randomBlock">

    <p>
      This is here to help illustrate the page jumping up.
    </p>

</div> 

<div class="productPage-accordion">

  <a class="tf-expand-trigger" href="#0">Description 1</a>

  <div class="tf-expand-content" style="display: block;">

    <div class="description">

      <p>This is the first accordion's content. This is the first accordion's content. This is the first accordion's content. This is the first accordion's content. This is the first accordion's content. This is the first accordion's content. This is the first accordion's content. This is the first accordion's content. This is the first accordion's content. This is the first accordion's content. This is the first accordion's content. This is the first accordion's content. This is the first accordion's content. This is the first accordion's content. This is the first accordion's content. This is the first accordion's content. </p>

    </div>

  </div>

</div>


<div class="productPage-accordion content">

  <a class="tf-expand-trigger" href="#0">Description 2</a>

  <div class="tf-expand-content">

    <p>This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content. This is the second accordion's content.

  </div>

</div>



<div class="productPage-accordion content">

  <a class="tf-expand-trigger" href="#0">Description 3</a>

  <div class="tf-expand-content">

    <p>This is the third accordion's content. This is the third accordion's content. This is the third accordion's content. This is the third accordion's content. This is the third accordion's content. This is the third accordion's content. This is the third accordion's content. This is the third accordion's content. This is the third accordion's content. This is the third accordion's content. This is the third accordion's content.</p>

  </div>

</div>

CSS

.randomBlock {
  background: #b1b1b1;
  height: 400px;
  padding: 50px;
}

/* --------------------------------

Expand and Close SlideToggle Information

-------------------------------- */


.tf-expand {
  position: relative;
  margin: 25px auto 0;
  box-shadow: none;
}

.productPage-accordion {
    border-bottom: 1px solid #ddd;
}

.tf-expand-trigger {
    display: block;
    position: relative;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2em;
    margin: 0;
    padding: 21px 0;
}

.tf-expand-content {
    display: none;
    padding-bottom: 20px;
}

Answer 1

Как насчет добавления следующей строки в конце вашего jQuery прослушивателя кликов:

 this.scrollIntoView();

https://jsfiddle.net/bz3pe9na/6/