MaterializeCSS问题：Toast提示触发时页面自动滚动至顶部

嘿，这个问题我之前帮好几个开发者排查过，大概率是浏览器默认行为没有被阻止导致的，主要分两种常见情况：

1. 按钮触发了表单的默认提交行为 #

如果你的按钮是放在<form>标签里的，而且是<input type="submit">，或者是没指定type的<button>（浏览器默认会把无type的button当成submit类型），那么点击按钮时，哪怕你写了Ajax请求，浏览器还是会执行表单的默认提交动作——要么刷新页面，要么跳转到表单action指定的地址（如果action为空就刷新当前页），这就会导致页面滚动到顶部。

解决办法： #

• 给按钮明确设置type="button"，告诉浏览器这只是个普通按钮，不是提交按钮：

<form>
  <button type="button" onclick="handleAjax()">提交请求</button>
</form>

• 或者在点击事件处理函数里阻止默认行为：

function handleAjax(event) {
  // 阻止表单默认提交
  event.preventDefault();
  
  // 你的Ajax请求代码
  fetch('/your-api-url')
    .then(res => res.json())
    .then(() => {
      M.toast({html: "Success"});
    });
}

2. 使用了带锚点的<a>标签作为按钮 #

如果你用<a href="#">来做触发按钮，点击时浏览器默认会跳转到页面顶部的锚点（#对应的就是页面最顶端），这个默认的锚点跳转动作会覆盖掉Ajax成功后的状态，导致页面滚到顶部。

解决办法： #

• 把<a>标签换成<button type="button">，更符合按钮的语义，也不会有锚点跳转问题；
• 或者在点击事件里阻止默认的锚点跳转行为：

<a href="#" onclick="handleAjax(event)">触发请求</a>
<script>
function handleAjax(event) {
  // 阻止锚点跳转
  event.preventDefault();
  
  // Ajax请求逻辑...
  fetch('/your-api-url')
    .then(() => {
      M.toast({html: "Success"});
    });
}
</script>

小概率情况：Toast组件的潜在问题 #

虽然这个情况很少见，但也可以排查下Materialize的toast组件有没有在显示时触发滚动的代码——不过根据我的经验，90%以上的情况都是前面两种默认行为没阻止导致的，先优先排查前面的问题。

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