Firefox点击Read more后滚动条下移问题咨询

我开发了一个简单的「展开/收起」功能，功能可正常运行，但Firefox在展开隐藏文本区域后，会跳转到「展开/收起」按钮的新位置，而非保持滚动条原有位置。只有当滚动条处于顶部时不会出现该现象；若将滚动条稍微向下移动后点击按钮，滚动条位置就会变动，最终停在文本末尾。Chrome、Edge和Opera的表现均正常，请问有什么方法可以阻止Firefox的这种行为？

点击前：

点击后（滚动条位置变化）：

源码 #

<!DOCTYPE html>
<html>
  <head>
    <title>Readmore Test</title>
    <style>
      .readmore-visible {
        max-height: none;
      }

      .readmore-hidden {
        max-height: 100px;
        overflow: hidden;
        position: relative;
      }

      .readmore-hidden:before {
        content:'';
        width:100%;
        height:100%;    
        position:absolute;
        left:0;
        top:0;
        background:linear-gradient(transparent 20px, #fff);
      }
    </style>
  </head>
  <body>
    <div class="readmore-hidden" id="readmore-text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 

      Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 

      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. 
    </div>
    <a href="#" class="readmore-button closed">Read more</a>
    <script src="https://code.jquery.com/jquery-3.6.1.slim.min.js"></script>
    <script>
      jQuery('a.readmore-button').click(function(e) {
        var _button_this = jQuery(this);
        var _text = jQuery('#readmore-text');

        e.preventDefault();
        if(_button_this.hasClass('closed')) {
          _text.removeClass('readmore-hidden').addClass('readmore-visible');
          _button_this.removeClass('closed').addClass('open').text('Read less');
        }
        else {
          _text.removeClass('readmore-visible').addClass('readmore-hidden');
          _button_this.removeClass('open').addClass('closed').text('Read more');
        }
        return false;
      });
    </script>
    <div style="height:1000px"></div>
  </body>
</html>

Firefox的这个问题源于元素高度变化后，浏览器默认会尝试将触发交互的按钮保持在视口中，导致滚动位置偏移。以下两种方法可解决该问题：

方法1：CSS属性直接阻止滚动锚定 #

使用CSS的overflow-anchor: none属性，专门用来禁用浏览器的自动滚动锚定行为。修改样式代码如下：

.readmore-visible {
  max-height: none;
  overflow-anchor: none;
}

.readmore-hidden {
  max-height: 100px;
  overflow: hidden;
  position: relative;
  overflow-anchor: none;
}

该方法无需修改JS代码，简单直接，推荐优先尝试。

方法2：记录并恢复滚动位置 #

在点击事件触发时先记录当前滚动位置，待文本展开/收起完成后，将滚动条重置回原位置。修改后的JS代码如下：

jQuery('a.readmore-button').click(function(e) {
  var _button_this = jQuery(this);
  var _text = jQuery('#readmore-text');
  // 记录当前滚动位置
  const scrollTop = $(window).scrollTop();

  e.preventDefault();
  if(_button_this.hasClass('closed')) {
    _text.removeClass('readmore-hidden').addClass('readmore-visible');
    _button_this.removeClass('closed').addClass('open').text('收起');
  }
  else {
    _text.removeClass('readmore-visible').addClass('readmore-hidden');
    _button_this.removeClass('open').addClass('closed').text('展开');
  }
  // 恢复滚动位置
  $(window).scrollTop(scrollTop);
  return false;
});

内容的提问来源于stack exchange，提问作者root66