设置scroll-behavior:smooth后网页打开自动滚动到底部的解决及优化求助

触发原因 #

• 页面DOM加载过程中高度动态变化：你使用了大量float布局，加上图片、带有超大上下padding的#Me元素加载顺序不同，浏览器初始计算的页面高度和最终渲染完成的高度差异较大，导致滚动位置被自动修正到底部，搭配scroll-behavior: smooth属性就会出现可见的平滑滚动过程。
• 初始自动聚焦：页面加载时如果底部的按钮、链接等可聚焦元素自动获得焦点，浏览器默认会滚动到聚焦元素位置。
• 隐式锚点跳转：如果页面URL带的hash值刚好对应底部元素的id，或者有隐藏的JS代码触发了锚点跳转，也会触发滚动行为。

解决方案 #

保留scroll-behavior: smooth属性的前提下，用JS控制平滑滚动的生效时机即可解决：

// 放在body末尾的script标签中
window.scrollTo(0, 0)
window.addEventListener('DOMContentLoaded', () => {
  document.documentElement.style.scrollBehavior = 'smooth'
})

逻辑是页面初始渲染时先固定在顶部，等所有DOM加载完成后再开启平滑滚动，既不影响业务使用的锚点平滑跳转效果，也不会出现初始自动滚到底部的问题。

1. 删除过时的兼容前缀
   你写的@-moz-keyframes、@-webkit-keyframes等私有前缀动画规则，以及body里带前缀的animation属性，现在所有主流浏览器都已经支持标准语法，完全可以删掉，只保留标准@keyframes fadein和标准animation属性即可。
2. 修复布局隐患
   你给body设置的height: 100vh会固定body高度为视口高度，内容超过一屏时会溢出，建议改成min-height: 100vh，保证最少占满一屏，内容多的时候可以自动撑开，也能避免高度计算异常导致的滚动问题。
3. 属性合并简写
   相同类型的属性可以合并简化代码：

/* 原background相关属性可以合并成一行 */
body {
  background: url(img/sfondo2.jpg) no-repeat fixed center / cover;
}
/* 原#Me的padding属性可以简化 */
#Me {
  padding: 600px 100px;
}

4. 避免全局标签样式污染
   不要直接给ul、li、a这类通用标签设置全局样式，会影响页面内所有同类型元素，建议全部替换为类选择器控制，比如导航栏的ul加.nav-list类、li加.nav-item类，精准控制样式。
5. 布局逻辑优化
   不要大量使用float做布局，float本来是为了实现文字环绕效果，用来做整体布局很容易出现高度塌陷、排版错乱的问题，换成flex/grid布局会更稳定，也能减少布局异常导致的滚动问题。
6. 语义化命名+避免冗余属性
   修正拼写错误的命名比如#buttonn，把语义模糊的命名比如.dwords改成.section-title这类可读性更高的名字；删除没用的冗余属性，比如footer里没设背景图，background-attachment、background-position属性可以直接删掉，li a里重复写的padding-right: 20px也可以删掉。
7. 公共属性抽离
   可以用CSS变量把重复用到的颜色、尺寸等公共属性抽离，后续修改只需要改一处：

:root {
  --hover-color: #eb4f34;
  --btn-bg: #ff7a7a;
  --text-white: #fff;
}
/* 用的时候直接调用变量 */
li a:hover {
  color: var(--hover-color);
}

8. 统一代码格式
   统一用2空格或者4空格缩进，不要出现参差不齐的缩进，提升代码可读性。

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