手风琴 - 滚动到打开内容的顶部

Question

我获得了以下用于手风琴菜单的 Java 脚本。如何添加额外的代码，以便当我单击新的手风琴菜单时，它滚动到打开的内容的顶部？

例如，打开很长的手风琴内容后，我会被推向页面底部，当我单击手风琴菜单时，内容会在上面打开并且看不到。

下面是提供的java脚本。谢谢您的帮助。

Java Script Provided
<script src="//code.jquery.com/jquery-3.5.1.js"></script>
          <script>
            $(document).ready(function() {
              $(document).on("scroll", onScroll);
              //smoothscroll
              $('a[href^="#"]').on('click', function(e) {
                e.preventDefault();
                $(document).off("scroll");
                $('#faq-menu a').each(function() {
                  $(this).removeClass('active');
                })
                $(this).addClass('active');
                var target = this.hash,
                  menu = target;
                $target = $(target);
                $('html, body').stop().animate({
                  'scrollTop': $target.offset().top + 2
                }, 500, 'swing', function() {
                  window.location.hash = target;
                  $(document).on("scroll", onScroll);
                });
              });
            });

            function onScroll(event) {
              var scrollPos = $(document).scrollTop();
              $('#faq-menu a').each(function() {
                var currLink = $(this);
                var refElement = $(currLink.attr("href"));
                if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
                  $('#faq-menu a').removeClass("active");
                  currLink.addClass("active");
                } else {
                  currLink.removeClass("active");
                }
              });
            }
          </script>
          <script>
            var accItem = document.getElementsByClassName('accordionItem');
            var accHD = document.getElementsByClassName('accordionItemHeading');
            for (i = 0; i < accHD.length; i++) {
              accHD[i].addEventListener('click', toggleItem, false);
            }

            function toggleItem() {
              var itemClass = this.parentNode.className;
              for (i = 0; i < accItem.length; i++) {
                accItem[i].className = 'accordionItem closed';
              }
              if (itemClass == 'accordionItem closed') {
                this.parentNode.className = 'accordionItem open';
              }
            }
          </script>
          <script>
            $(window).scroll(function() {
              var scroll = $(window).scrollTop();
              if (scroll >= 200) {
                $(".menu").addClass("freeze");
              } else {
                $(".menu").removeClass("freeze");
              }
            });
          </script>

Answer 1

此修改包括添加toggleItem函数，该函数处理展开手风琴项目后的滚动行为。当打开手风琴项目时，它会计算单击的标题的偏移顶部位置并滚动到该位置，将其带入视图。

function toggleItem() {
var itemClass = this.parentNode.className;
for (i = 0; i < accItem.length; i++) {
    accItem[i].className = 'accordionItem closed';
}
if (itemClass == 'accordionItem closed') {
    this.parentNode.className = 'accordionItem open';

    // Scroll to the top of the opened content
    var offsetTop = $(this).offset().top;
    $('html, body').animate({
        'scrollTop': offsetTop
    }, 500);
  }
}

现在发生的事情是这样的：

在

var offsetTop = $(this).offset().top;

中：

$(this)

指的是当前元素，即点击的手风琴标题（accordionItemHeading）。

.offset()

是一个 jQuery 函数，它返回一个对象，该对象具有元素相对于文档的 top 和 left 属性。

.top

获取文档顶部到当前元素顶部的距离。剩下的只是一个简单的动画。我希望它有帮助:)