Question

我是编码的新手，但是我能够对一个不太复杂且没有后端的站点进行编码。但是有些事情我不知道该怎么做，我找不到关于它的教程。所有的一页站点都有这个。当您从导航栏单击一个标签时，这种平滑的滚动效果就可以了。您能给我一个教程还是告诉我它是如何完成的？

Answer 1

使用scrollIntoView，将行为设置为“平滑”可产生平滑的滚动效果：

document.getElementById('scrolldiv').scrollIntoView({behavior: 'smooth'})

.box-red {
  display: block;
  height: 200px;
  width: 100%;
  background-color: red;
}

.box-blue {
  display: block;
  height: 200px;
  width: 100%;
  background-color: blue;
}

TOP
<div class="box-blue"></div>
<div class="box-red"></div>
<div class="box-blue"></div>
<div class="box-red"></div>
<div class="box-blue"></div>
<div class="box-red"></div>

<div id="scrolldiv">Scroll here</div>

注意：此代码也会使您的页面滚动。

或者，您可以使用css使所有滚动平滑，例如单击锚标记时：

html {
  scroll-behavior: smooth;
}

.box-red {
  display: block;
  height: 200px;
  width: 100%;
  background-color: red;
}

.box-blue {
  display: block;
  height: 200px;
  width: 100%;
  background-color: blue;
}

<a href="#scrolldiv">Scroll to div</a>
<div class="box-blue"></div>
<div class="box-red"></div>
<div class="box-blue"></div>
<div class="box-red"></div>
<div class="box-blue"></div>
<div class="box-red"></div>

<div id="scrolldiv">Scroll here</div>

编辑：

function scrollToDiv(div) {
  document.getElementById(div).scrollIntoView({behavior: 'smooth'})
}

// NOTE: I had to use a different function name as scroll() already exists in JS

.box-red {
  display: block;
  height: 200px;
  width: 100%;
  background-color: red;
}

.box-blue {
  display: block;
  height: 200px;
  width: 100%;
  background-color: blue;
}

<button onclick="scrollToDiv('scrolldiv')">Scroll to div</button>
<div class="box-blue"></div>
<div class="box-red"></div>
<div class="box-blue"></div>
<div class="box-red"></div>
<div class="box-blue"></div>
<div class="box-red"></div>

<div id="scrolldiv">Scroll here</div>

Answer 2

以下是教程：https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section1

不确定那是不是你要找的东西。

在一页站点上平滑滚动动画

2 个答案: