Slick Slider搭配readmore.js触发断点后点击readmore页面跳顶问题排查

问题根因 #

• Slick Slider在触发响应式断点时会销毁并重建滑块内的DOM结构，页面加载时一次性绑定的readmore.js事件会随着DOM重建失效，此时href="#"的a标签没有对应的JS阻止默认行为，就会触发锚点默认跳转逻辑，导致页面跳转到顶部。
• 将href改为"/"后，a标签的默认行为是跳转到站点根路径，自然不会触发折叠展开逻辑。

修复方案 #

将readmore的初始化逻辑和Slick的生命周期事件绑定，每次Slick完成初始化、触发响应式断点重渲染后，都重新初始化readmore实例，同时增加默认行为阻止的兜底逻辑，原有单独的readmore初始化代码可以删除。

修改后的完整代码如下：

<script src="https://assets.codepen.io/3490843/jquery-2.1.0.min.js"></script>
<script src="https://assets.codepen.io/3490843/readmore.min.js"></script>
<script src="https://assets.codepen.io/3490843/slick.min.js"></script>
    
<script type="text/javascript">
$(document).ready(function(){
  // 封装公共的readmore初始化方法
  function initReadmore() {
    // 先销毁已存在的实例，避免重复绑定
    if ($('.demo').data('readmore')) {
      $('.demo').readmore('destroy');
    }
    $('.demo').readmore({ 
      moreLink: '<a href="#">Read more...</a>', 
      lessLink: '<a href="#">Hide</a>', 
      collapsedHeight: 56, 
      speed: 200,
      // 点击链接时阻止默认跳转，兜底处理
      beforeToggle: function(trigger) {
        trigger.off('click').on('click', function(e) {
          e.preventDefault();
        });
      },
      afterToggle: function(trigger, element, expanded) { 
        if(!expanded) {
          $('html, body').animate({scrollTop: $(element).offset().top}, {duration: 100}); 
        } 
      } 
    }); 
  }

  $('.multiple-items').slick({
    autoplaySpeed: 3000, 
    autoplay: false,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          adaptiveHeight: true
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  // Slick首次初始化完成后执行readmore初始化
  }).on('init', function() {
    initReadmore();
  // 每次响应式断点触发、Slick重渲染后重新初始化readmore
  }).on('breakpoint', function() {
    initReadmore();
  });
});
</script>

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