单击以将手风琴动画化到屏幕顶部

Question

我想为单击的手风琴项目设置动画到页面顶部。第一次单击有效，但是之后的所有东西似乎都积累了起来，使手风琴向上滑动并看不见。正确的功能是将每个项目从窗口顶部的固定位置滚动到上一个确切的位置。问题的一部分是我使用的是原型，并且不确定每次创建实例时如何停止点击累积。

var media = window.matchMedia("(max-width: 767px")
    
    var Accordion = function(el, multiple) {
      this.el = el || {}
      this.multiple = multiple || false
    
      var links = this.el.find('.link')
    
      links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
    }
    
    Accordion.prototype.dropdown = function(e) {
      var $el = e.data.el
          $this = $(this)
          $next = $this.next()
    
      $next.slideToggle()
      $this.parent().toggleClass('open')
    
      if(!e.data.multiple) {
        $el.find('.content').not($next).slideUp().parent().removeClass('open')
      }
    
      if(media.matches) {
        $("html, body").animate({ 
          scrollTop: $this.offset().top - 85
        }, 900)
      }
    }
    
    var accordion = new Accordion($('.hollow-accordion-03 #accordion'), false)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="hollow-accordion-03">
  <div class="flex-container">
    <ul id="accordion">
      <li>
        <div class="link">
          <i class="fa fa-database"></i>
          <h3>First List Item</h3>
          <div class="state-wrap">
            <i class="fa fa-plus"></i>
            <i class="fa fa-minus"></i>
          </div>
        </div>
        <div class="content">
          <p>This is filler content for the list item. Content in this section will be replaced by copy for your site. This is filler text. Content in this section will be replaced by copy for your site. This is filler text.</p>
        </div>
      </li>
      <li>
        <div class="link">
          <i class="fa fa-database"></i>
          <h3>Second List Item</h3>
          <div class="state-wrap">
            <i class="fa fa-plus"></i>
            <i class="fa fa-minus"></i>
          </div>
        </div>
        <div class="content">
          <p>This is filler content for the list item. Content in this section will be replaced by copy for your site. This is filler text. Content in this section will be replaced by copy for your site. This is filler text.</p>
        </div>
      </li>
      <li>
        <div class="link">
          <i class="fa fa-database"></i>
          <h3>Third List Item</h3>
          <div class="state-wrap">
            <i class="fa fa-plus"></i>
            <i class="fa fa-minus"></i>
          </div>
        </div>
        <div class="content">
          <p>This is filler content for the list item. Content in this section will be replaced by copy for your site. This is filler text. Content in this section will be replaced by copy for your site. This is filler text.</p>
        </div>
      </li>
      <li>
        <div class="link">
          <i class="fa fa-database"></i>
          <h3>Fourth List Item</h3>
          <div class="state-wrap">
            <i class="fa fa-plus"></i>
            <i class="fa fa-minus"></i>
          </div>
        </div>
        <div class="content">
          <p>This is filler content for the list item. Content in this section will be replaced by copy for your site. This is filler text. Content in this section will be replaced by copy for your site. This is filler text.</p>
        </div>
      </li>
    </ul>
  </div>
</section>