平滑滚动 - 回到顶部
2019-08-09 本文已影响0人
人话博客
在开发 Web 页面时,让页面会到某一个指定的位置是非常常见的需求.
比如回到顶部功能.
1.
直接在定义定义一个锚点.点击一个指向此锚点的标签即可.
<style>
* {
margin: 0;
padding: 0;
}
a.gototop {
position: fixed;
right: 0;
bottom: 20px;
padding: 10px 20px;
background-color: orange;
color: #fff;
text-decoration: none;
}
.box {
height: 400px;
background-color: #2890FF;
margin: 20px auto;
}
header {
height: 80px;
line-height: 80px;
color: #fff;
text-align: center;
font-size: 30px;
font-weight: 700;
background-color: orange;
}
</style>
</head>
<body>
<!-- 回到顶部的锚点 -->
<header id="top">this is top of the page</header>
<!-- 回到顶部的按钮 -->
<a class="gototop" href="#top">回到顶部</a>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
点击回到回到顶部按钮,页面将直接回到指定的锚点处.
此时没有任何动画效果,是很生硬的过来的.
2.
直接使用 css3 新的样式属性 scroll-behavior:'smooth' 即可.
将需要滚动的元素设置这个样式即可.
html {
scroll-behavior: smooth;
}
<body>
<!-- 回到顶部的锚点 -->
<header 420123456="top">this is top of the page</header>
<!-- 回到顶部的按钮 -->
<a class="gototop" href="#top">回到顶部</a>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
3.
如果需要更细粒度的控制.
- css3 : scroll-behavior : smooth
- js: element.scrollTo(x,y)
用 css 设置需要平滑过渡的元素.
用 js 找到要滚动的元素进行滚动.
4.
利用H5 的新 API element.scrollIntoView 并指定 options 即可.
element.scrollIntoView({
behavior: 'auto | smooth | auto(default)',
block: 'start | center | end | nearest (default)'
})
总结:
- 很粗的粒度去控制简单的平滑滚动效果,直接使用
scroll-behavior: 'smooth'即可.套用上这个元素滚动起来就是平滑的. - 细粒度的控制可以搭配
scroll-behavior: 'smooth'&element.scrollTo(x,y)来完成. - 也可以使用 H5 新的 API
element.scrollIntoView([options])来实现平滑滚动.
