CSS3而不是滾動無需重新加載頁面

Question

我按照這個例子

https://developer.mozilla.org/en/docs/Web/CSS/scroll-behavior

但它不工作，頁面重新加載。我只需要滾動，而不是重新加載。

其實我想滾動所有的身體到某個id項。

// HTML5

<nav> 
    <a href="#page-1" rel='no-refresh' >1</a> 
    <a href="#page-2" rel='no-refresh' >2</a> 
    <a href="#page-3" rel='no-refresh' >3</a> 
</nav> 
<scroll-container> 
    <scroll-page id="page-1" >1</scroll-page> 
    <scroll-page id="page-2">2</scroll-page> 
    <scroll-page id="page-3">3</scroll-page> 
</scroll-container> 

// CSS3

a { 
    display: inline-block; 
    width: 50px; 
    text-decoration: none; 
} 
nav, scroll-container { 
    display: block; 
    margin: 0 auto; 
    text-align: center; 
} 
nav { 
    width: 339px; 
    padding: 5px; 
    border: 1px solid black; 
} 
scroll-container { 
    display: block; 
    width: 350px; 
    height: 200px; 
    overflow-y: scroll; 
    scroll-behavior: smooth; 
} 
scroll-page { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 100%; 
    font-size: 5em; 
} 

Answer 1

此功能僅完全火狐36目前支持。 Internet Explorer或Safari都不支持此功能。

要使其適用於Chrome或Opera，您需要進入瀏覽器設置並啓用「平滑滾動」或「啓用實驗性Web平臺功能」標誌。

邊注意：您鏈接到的頁面包含有關瀏覽器兼容性的信息以備將來參考。由於缺少跨瀏覽器的實現，因此不應將此代碼用於生產環境。

如果您想在生產環境中添加平滑滾動，我現在推薦基於JavaScript的實現。