网站滚动无法到达顶部的问题求助（Chrome/Firefox均复现）

问题出在.content的定位逻辑上：

.content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

这种定位是让元素基于视口垂直居中，当内容高度超过视口时，元素顶部会被视口截断，导致无法滚动到页面最上方。添加底部区域后内容高度增加，触发了这个隐藏的定位问题。

替换掉绝对居中的写法，用flex布局实现内容居中，同时保证滚动逻辑正常：

1. 更新body样式：

body {
    background-color: #64B6AC;
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
}

2. 移除.content的绝对定位相关属性，修改后：

.content {
    background-color: #C0FDFB;
    max-width: 75%;
    min-height: 100%;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

通过flex让body作为容器水平居中.content，内容高度超过视口时会自动生成滚动条，且能正常滚动到顶部。

@font-face {
    font-family: "Bluu";
    src: url("cdn/fonts/BluuNext-master/fonts/BluuNext-Bold.otf");
}

@font-face {
    font-family: "Karrik";
    src: url("cdn/fonts/karrik_fonts-main/fonts/Web/TFF/Karrik-Regular.ttf");
}

html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

::-webkit-scrollbar {
    width: 10px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    background-image: -webkit-gradient(linear,
                                       left bottom,
                                       left top,
                                       color-stop(0.44, rgb(122,153,217)),
                                       color-stop(0.72, rgb(73,125,189)),
                                       color-stop(0.86, rgb(28,58,148)));
}

body {
    background-color: #64B6AC;
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
}

.content {
    background-color: #C0FDFB;
    max-width: 75%;
    min-height: 100%;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.interior {
    margin-left: 40px;
}

.hamburger {
    font-size: 40px;
    color: black;
    text-decoration: none;
    margin-top: 20px;
}

/* General Styles for all */

.lower-area {
    margin-top: 100px;
    text-align: center;
    margin-bottom: 100px;
}

.button-styles {
    background: #FFFFFF;
    border-radius: 5px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-right: 30px;
    padding-left: 30px;
    border: none;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    font-family: "Karrik";
    color: rgb(8, 8, 8);
    text-decoration: none;
    font-size: 16px;
    transition: 0.3s ease-in-out;
}

.button-styles:hover {
    color: #FFFFFF;
    background-color: rgb(8, 8, 8);
}

/* Headings */

.large-heading {
    font-family: "Bluu";
    font-size: 7vw;
}

.medium-heading {
    font-family: "Bluu";
    font-size: 5vw;
}

.sub-heading {
    font-family: "Karrik";
    font-size: 3vw;
}

/* Paragraphs */

.paragraph {
    font-size: 1.4vw;
    max-width: 90%;
    display: block;
    font-family: "Karrik";
    font-weight: 200;
}

/* Mobile responsiveness */

@media (max-width:1000px)  {
    .content {
        min-width: 100%;
        min-height: 100%;
    }

    .hamburger {
        font-size: 25px;
        margin-top: 40px;
    }

    .paragraph {
        font-size: 4vw;
    }
}

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