我的平滑滾動功能似乎對我的個人作品集網站不起作用，請查看下面我的css標題代碼:`

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
html{
    overflow-y: scroll;
    scroll-behavior: smooth !important;
}
body{
    background: #080808;
    color: #fff;
    scroll-behavior: smooth;
}
#header{
    width: 100%;
    height: 100vh;
    background-image: url(Images/Europe-png.png);
    background-size: cover;
    background-position: center;
}
.container{
    padding: 10px 1%;
}
nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.logo{
    width: 160px;
}
nav ul li{
    display: inline-block;
    list-style: none;
    margin: 20px 20px;
}
nav ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    position: relative;
}
nav ul li a::after{
    content: '';
    width: 0;
    height: 3px;
    background: #ff004f;
    position: absolute;
    left: 0;
    bottom: -6px;
    transition: 0.5s;
}
nav ul li a:hover::after{
    width: 100%;
}
.header-text{
    margin-top: 20%;
    font-size: 30px;
    color: rgb(147, 139, 50);
}
.header-text h1{
    margin-top: 20px;
    font-size: 60px;
}
.header-text h1 span{
    color: #ff004f
}

我試著在主體上添加滾動行為，然后！對html很重要。兩者似乎都沒有解決辦法...你們對這個問題有什么經驗嗎？有什么推薦嗎？

這似乎是一個瀏覽器問題。你有沒有試過另一個瀏覽器，看看問題是否仍然存在？

這在MacOS Safari上存在已知問題，因為它不支持屬性scroll-behavior:smooth。您可以在此處檢查瀏覽器兼容性

更新:替代方法 使用來自GitHub的“Chris Ferdinandi”的javascript插件

由于您是JavaScript和jQuery的新手，我建議您將平滑滾動插件作為CDN包含在您的head標簽中:

& lt腳本src = & quothttps://cdn . jsdelivr . net/GH/cferdinandi/smooth-scroll @ 15/dist/smooth-scroll . poly fills . min . js & quot；& gt& lt/script & gt；

然后，您將需要創建另一個js文件，并將它與您的CDN一起包含在另一個& lt腳本& gt標簽。

& lt腳本& gtvar scroll = new smooth scroll(' a[href * = & quot；# & quot]');& lt/script & gt；

這將確保您創建的任何滾動到其他元素的錨標記都將平滑滾動。你可以閱讀前面提到的G itHub文檔，了解如何定制一些東西，比如速度。

演示

var scroll = new SmoothScroll('a[href*="#"]');

<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15/dist/smooth-scroll.polyfills.min.js"></script>
<p id="top">
    <a href="#bazinga">Go to the middle</a><br>
    <a href="#1@#%^-bottom">Go to the bottom</a>
</p>

<p>
    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
</p>

<p id="bazinga"><a href="#1@#%^-bottom">Go to the bottom</a></p>

<p>
    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
</p>

<p id="1@#%^-bottom"><a href="#top">Go back to the top</a></p>