Question

单击锚点链接时，我正在尝试实现平滑滚动，但是此刻，我仍然可以快速跳转到#content，并且无法弄清楚哪里出了问题。

HTML：

<body class="home">
  <section id="cover-section" class="section cover">
    <div class="cover-inner content">
      <h1 class="title"><span class="title-inner">TITLE</span></h1>
      <p class="byline">Some text here</p>
      <a class='section-jump' href='#content'></a>
    </div>
  </section>
  <section class="section content">
    <a id='content' href="https://github.community/t5"><img src="logo.png"
        alt="Logo image" title="Logo"></a>

CSS：

.section-jump {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1em;
  border: 0.5em solid white;
  width: 0;
  height: 0;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}

.section.content {
  height: 100vh;
  scroll-behavior: smooth;
}

浏览器信息： Chrome版本69.0.3497.100 也在Safari 12.0中进行了测试

Answer 1

我通过将scroll-behavior属性添加到CSS中的html标签而不是直接在.section content容器上来使此代码起作用。

Answer 2

您的问题在CSS选择器中

必须是这样的：

.section #content {
     height: 100vh;
     scroll-behavior: smooth;
 }

您应该指向您的ID

滚动行为平滑，带有锚标记，没有区别

2 个答案: