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

在访问某些网站时，用户可能会觉得有必要跳过不相关的内容，直接跳到用户感兴趣的内容上，在CSS中有很多方法可以做到这一点。用户可能想点击一个按钮或链接，把他们带到同一页面上的一个元素。用户可能想滚动到一个特定的元素，或者能够跳过内容。

在这篇文章中，我们将看看如何在CSS中滚动到一个特定的元素或跳过一个特定的内容。

如何滚动到元素或内容

跳过内容的方法有很多，比如我们可以使用scroll-behaviour属性，并将其值设置为smooth，这样就可以平滑地滚动到顶部，但是使用这个属性并不能给我们带来很多控制，因为它只能使滚动变得平滑。我们可以使用scroll-behaviour属性，比如说

html{
   scroll-behaviour: smooth;
}

我们还可以使用另一种方法，在这两种方法中，我们都没有关注某个特定的元素，他们只是向上滚动。

<html>
   <body>
      <a id="to the top"> </a>
      <a href="#top"> This will take you to the top of the page</a>
   </body>
</html>

上面的例子会把你带到页面的顶部，而不是某个特定的元素。要跳到一个特定的元素并跳过内容，让我们看一个例子

例子

我们在这里要采取的方法是以内容为目标，创建一个容器，所有的链接都将出现在容器中，在部分内容中我们将使用锚定标签，并给它们一个ID，以便锚定标签能够指向它们。让我们看一下代码

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Example for scrolling to an element</title>
      <style>
         .scroll-to {
            position: absolute;
            top: 1200px;
         }
         .scroll-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 10px 20px;
            background-color: blue;
            color: white;
            text-decoration: none;
            cursor: pointer;
         }
      </style>
   </head>
   <body>
      <div id="content">
         <h1>Page Content</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, metus in facilisis pellentesque, nulla orci tristique dolor, euismod malesuada augue massa ac dolor.</p>
         <div class="scroll-to">
            <h2>Scroll to me!</h2>
         </div>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, metus in facilisis pellentesque, nulla orci tristique dolor, euismod malesuada augue massa ac dolor.</p>
      </div>
      <a href="#" class="scroll-btn" onclick="scrollToTarget()">Scroll</a>
      <script>
         function scrollToTarget() {
            var target = document.querySelector('.scroll-to');
            target.scrollIntoView({behavior: 'smooth'});
         }
      </script>
   </body>
</html>

在上述代码的输出中，将有一个标题 “页面内容 “和写在标题下的内容，在屏幕的右下角将有一个按钮，写着 “滚动”>你将不得不滚动到页面的底部，你将看到一个标题 “滚动到我”，当你按下 “滚动 “按钮时，页面将自动带你到 “页面内容”。

例子

我们在这里要采取的方法是以内容为目标，创建一个容器，我们所有的链接都将出现在这个容器中，在章节部分，我们将使用锚定标签，并给它们一个ID，以便锚定标签可以指向它们。让我们看一下代码

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Example of scrolling to a particular element </title>
      <style>
         .con{
            justify-content: space-between;
            display: flex;
         }
         section:target {
            border: solid blue 1px;
         }
      </style>
   </head>
   <body>
      <div class="con">
         <a href="#section1">Go to The Section 1</a>
         <a href="#section2">Go to The Section 2</a>
      </div>
      <section id="section1">
         <h2>This is Section 1</h2>
      </section>
      <section id="section2">
         <h2>This is Section 2</h2>
      </section>
   </body>
</html>

在输出中，你可以看到有2个超链接，无论点击哪一个，都会有一个蓝色的边框显示在那个特定的部分，表明点击超链接会把用户带到所需的元素。