该博客内容讲述了如何在HTML中实现一个点击目录即可平滑滚动到对应内容的功能。通过使用`<script>`标签内的`jump`函数，结合`document.querySelector`和`scrollIntoView`方法，可以实现页面元素的平滑滚动。样式设置中，给`.box`类添加了滚动条，并设置了固定高度以产生滚动效果。
需求：博客文章的目录，点击目录，滚动到对应的内容
<html>
<div class="box">
<button>按钮</button>
<ul>
<li v-for="(item,index) in 100"
:key="index"> aa{{item}}
</li>
</ul>
<div class="wait">等着你...</div>
</div>
</html>
实现如下：
<script>
jump(){
document.querySelector(".wait").scrollIntoVi ew({
behavior:"smooth"
})
}
</script>
//样式要出现滚定条
<style>
.box {
height:200px;
overflow-y:auto
}
</style>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
