要使用CSS制作平滑滚动特效,可以使用`scroll-behavior`属性和`scroll-margin-top`属性。

首先,将所需元素的`scroll-behavior`属性设置为`smooth`。这会使滚动动画平滑进行。

css
.element-class {
scroll-behavior: smooth;
}

接下来,可以使用`scroll-margin-top`属性来添加滚动位置的偏移量,以确保滚动后保持所需的间距。

css
.element-class {
scroll-margin-top: 100px;
}

在这个例子中,滚动时距离顶部的间距将保持为100px。你可以根据需要调整这个值。

请确保将`.element-class`替换为你想要应用这些效果的元素的类名或选择器。

这样,当用户滚动到特定元素时,浏览器会自动应用平滑滚动效果和所需的间距。