切换Accordion组件时如何消除页面滚动跳转问题？

我做了一个带按钮的Accordion组件，点击按钮能切换显示对应区块，但切换时页面会自动滚动到锚点位置，还出现抖动。下面是按钮的HTML和切换逻辑的jQuery代码，求解决页面滚动跳转的方法。

按钮HTML代码 #

<div class="goods_button">
  <li><a href="#tab1">Specifications</a></li>
  <li><a href="#tab2">Support & Downloads</a></li>
  <li><a href="#tab3">Gallery</a></li>
  <li><a href="#tab4">Test results</a></li>
</div>

切换逻辑的jQuery代码 #

$(document).ready(function($) {
  $('.goods_block').hide();
  $('.goods_block:first').show();
  $('.goods_button li:first').addClass('block-active');
  
  $('.goods_button li').click(function(event) {
    $('.goods_button li').removeClass('block-active');
    $(this).addClass('block-active');
    $('.goods_block').hide();
    var selectTab = $(this).find('a').attr("href");
    $(selectTab).fadeIn();
  });
});

问题原因&解决方案 #

问题根源是a标签的*href="#tabx"*会触发浏览器默认的锚点跳转行为，导致页面自动滚动到对应ID的元素位置，进而出现抖动。下面提供两种可行的解决方法：

方法一：阻止a标签的默认跳转行为 #

在点击事件中添加event.preventDefault()，直接禁用a标签的跳转功能，代码改动最小：

$(document).ready(function($) {
  $('.goods_block').hide();
  $('.goods_block:first').show();
  $('.goods_button li:first').addClass('block-active');
  
  $('.goods_button li').click(function(event) {
    // 阻止a标签的默认锚点跳转
    event.preventDefault();
    
    $('.goods_button li').removeClass('block-active');
    $(this).addClass('block-active');
    $('.goods_block').hide();
    var selectTab = $(this).find('a').attr("href");
    $(selectTab).fadeIn();
  });
});

方法二：改用data属性存储目标ID（更推荐） #

把a标签的href替换成data-target属性，同时给href设置javascript:void(0)避免跳转，这种方式语义更清晰，也彻底规避了锚点跳转的问题：

修改后的HTML：

<div class="goods_button">
  <li><a href="javascript:void(0)" data-target="#tab1">Specifications</a></li>
  <li><a href="javascript:void(0)" data-target="#tab2">Support & Downloads</a></li>
  <li><a href="javascript:void(0)" data-target="#tab3">Gallery</a></li>
  <li><a href="javascript:void(0)" data-target="#tab4">Test results</a></li>
</div>

对应的jQuery代码：

$(document).ready(function($) {
  $('.goods_block').hide();
  $('.goods_block:first').show();
  $('.goods_button li:first').addClass('block-active');
  
  $('.goods_button li').click(function(event) {
    $('.goods_button li').removeClass('block-active');
    $(this).addClass('block-active');
    $('.goods_block').hide();
    // 从data-target属性获取目标区块ID
    var selectTab = $(this).find('a').data("target");
    $(selectTab).fadeIn();
  });
});

两种方法都能解决页面滚动抖动的问题，方法二更符合现代前端的编码规范，建议优先使用。

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