如何滚动到特定元素或跳过 CSS 中的内容？

有时，我们需要用户单击按钮或链接并将它们带到同一 HTML 页面上的元素。此外，这需要将用户带到元素而无需任何重新加载。很多时候，用户倾向于跳到主要内容，例如在游戏网站上。他们可能想跳过说明并直接玩游戏。所以，基本上，我们想要滚动到特定元素或跳到内容。

在本文中，我们将学习如何滚动到特定元素或仅跳到纯HTML和CSS 中的内容。

示例 1：

HTML

  

    
    
    
    
    

  

    

  
        
        
        Go to Section 1
        Go to Section 2
        Go to Section 3
        Go to Section 4
    
  
    
  
    

        
Scetion 1
    
    

        
Scetion 2
    
    

        
Scetion 3
    
    

        
Scetion 4
    

  

输出：我们的 HTML 在浏览器窗口中将如下所示。

示例 2：现在让我们继续添加一些样式，以便我们可以将各个部分彼此远离放置。

HTML

  

    
    
    
  
    

  

    

  
        
        Go to Section 1
        Go to Section 2
        Go to Section 3
        Go to Section 4
    
  
    
    

        

            
Section 1
        
        

            
Section 2
        
        

            
Section 3
        
        

            
Section 4
        
    

  

输出：现在，当我们在浏览器中打开我们的 HTML 文件时，我们可以看到当我们点击任何链接时的功能，即转到第 1 节、转到第 2 节等。

虽然我们正在跳过内容，但行为仍然不流畅。您可以观察到，当我们单击链接时，我们会直接转到所需的部分。但是我们也可以让它平滑地滚动到所需的部分。

为此，我们可以在代码中使用以下行：

scroll-behavior: smooth;

HTML 中还定义了其他滚动行为，您可以到此处了解有关它们的详细信息。在这里，我们将使用平滑行为。在这里，我们将使用滚动到我们想要去的特定部分，只需单击一次链接。

最终的代码将如下所示：
示例 3：

HTML

  

    
    
    
    
  
    

  

    

  
        
        Go to Section 1
        Go to Section 2
        Go to Section 3
        Go to Section 4
    
  
    
    

        

            
Section 1
        
        

            
Section 2
        
        

            
Section 3
        
        

            
Section 4
        
    

  

输出：正如您在输出中看到的，我们正在平滑滚动到各个部分并跳过内容。