页面刷新自动向下滚动如何解决？如何隐藏About me标题至点击后显示？

一、解决页面加载/刷新时自动向下滚动的问题 #

页面自动滚动大多是因为浏览器默认会定位到URL里的锚点（比如你用的#down），或者平滑滚动的代码在页面加载时误触发了滚动。试试这两种办法修复：

方法1：改用JS触发平滑滚动，替换锚点链接 #

把原来的<a href="#down">改成普通按钮，用JS控制滚动和显示，避免浏览器加载时自动跳锚点：

<div class="About">
    <button type="button" onclick="scrollToAbout()"><span></span><b>CLICK TO LEARN MORE</b></button>
    <div id="down">
        <h1>About me</h1>
    </div>
</div>

<script>
function scrollToAbout() {
    const aboutSection = document.getElementById('down');
    // 平滑滚动到目标区域
    aboutSection.scrollIntoView({ behavior: 'smooth' });
    // 显示About me区域
    aboutSection.style.display = 'block';
}
</script>

方法2：页面加载时重置滚动位置 #

如果还是想用<a>标签，就在页面加载完成后强制滚回顶部：

<script>
window.addEventListener('load', function() {
    window.scrollTo(0, 0);
});
</script>

二、让“About me”标题靠下且仅点击按钮后可见 #

1. 调整位置：给#down容器加足够的上边距，把它推到页面更靠下的地方：

#down {
    margin-top: 800px; /* 数值自己根据页面情况调整 */
    display: none; /* 默认隐藏 */
}

2. 点击按钮后显示：结合上面的JS代码，点击按钮时不仅滚动过去，还要把#down显示出来。想要更平滑的显示效果，可以用过渡动画：

#down {
    margin-top: 800px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease; /* 添加过渡动画 */
}

#down.show {
    opacity: 1;
    visibility: visible;
}

然后把JS改成这样：

function scrollToAbout() {
    const aboutSection = document.getElementById('down');
    aboutSection.classList.add('show');
    aboutSection.scrollIntoView({ behavior: 'smooth' });
}

内容的提问来源于stack exchange，提问作者Sebastian Vik Westre