“回到顶部”功能
浏览器“回到顶部”
css使用scroll-behavior平滑回到顶部
scroll-behavior为一个滚动框指定滚动行为,其他任何的滚动,例如那些由于用户行为而产生的滚动,不受这个属性的影响。在根元素中指定这个属性时,它反而适用于视窗。
语法:
scroll-behavior: auto;/*滚动框立即滚动*/
scroll-behavior: smooth;/*滚动框通过一个用户代理预定义的时长、使用预定义的时间函数,来实现平稳的滚动*/
浏览器的兼容性
pc端:
浏览器 | 是否支持 |
---|---|
Chrome | Yes |
edge | No |
Firefox | Yes |
Internet Explorer | No |
Opera | Yes |
Safari | No |
移动端:
浏览器 | 是否支持 |
---|---|
Android webview | Yes |
Chrome for Android | Yes |
Edge Mobile | No |
Firefox for Android | Yes |
Opera for Android | Yes |
Safari on iOS | No |
Samsung Internet | 未知 |
js使用scrollIntoView平滑回到顶部
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。
语法:
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数
参数alignToTop:
value | 和scrollIntoViewOptions同作用的 | 作用 |
---|---|---|
true | {block: “start”, inline: “nearest”} | 元素的顶端将和其所在滚动区的可视区域的顶端对齐 |
false | {block: “end”, inline: “nearest”} | 元素的底端将和其所在滚动区的可视区域的底端对齐 |
参数scrollIntoViewOptions:
key | value | 作用 |
---|---|---|
behavior | “auto”, “instant”, 或 “smooth” | “auto”, "instant"是立即回到顶部,smooth是缓慢回到顶部 |
block | “start”, “center”, “end”, 或 “nearest” | end和nearest的作用一样,底端对齐 |
inline | “start”, “center”, “end”, 或 “nearest” | start和nearest的作用一样,顶端对齐 |
实例:
*{
margin: 0;
padding: 0;
}
/*平滑的回到顶部,这个也可以加给容器元素,可以让容器(非鼠标手势触发)的滚动变得平滑,而不局限于<html>,<body>标签*/
html,body{ scroll-behavior: smooth;}/*用于锚点回顶部和事件修改scrollTop回顶部*/
.content_item{
line-height: 300px;
width: 98%;
margin: 0 auto 20px;
border: 1px solid #eee;
text-align: center;
}
.top_back{
position: fixed;
bottom: 50px;
right: 50px;
background-color: #aaa;
color: white;
padding: 10px 20px;
cursor: pointer;
}
<div class="container" id'top'>
<div class="content" >
<div class="content_item">1</div>
<div class="content_item">2</div>
<div class="content_item">3</div>
<div class="content_item">4</div>
<div class="content_item">5</div>
</div>
<!--点击事件回到顶部-->
<div class="top_back">
回到顶部
</div>
<!--锚点回到顶部-->
<!--<a class="top_back" href="#top">
回到顶部
</a>-->
</div>
var top_back=document.getElementsByClassName('top_back')[0];
var container=document.getElementsByClassName('container')[0];
//修改scrollTop回到顶部
top_back.onclick=function(e){
//第一种直接修改scrollTop,css中使用scroll-behavior: smooth;缓慢回去
//document.body.scrollTop=0;
//document.documentElement.scrollTop=0;
//第二种要回去的元素设置scrollIntoView
container.scrollIntoView({block: "start", inline: "nearest",behavior :'smooth'})
}
注:如果想要自己设置回去的时间可以使用jquery的animate
$('.top_back').click(function() {
$('html,body').animate({
scrollTop: 0
}, 100);
})
scrollTop浏览器兼容
浏览器 | 支持 |
---|---|
Chrome | document.body.scrollTop |
Firefox | window.pageYOffset、document.documentElement.scrollTop |
Internet Explorer 6/7/8 | document.documentElement.scrollTop |
Internet Explorer 9及以上 | window.pageYOffset、document.documentElement.scrollTop |
Opera | window.pageYOffset、document.documentElement.scrollTop |
Safari | window.pageYOffset、document.body.scrollTop |
注:从上面表格可以看出,获取scrollTop的兼容写法可以是:
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
小程序“回到顶部”
/* page和scroll-view设置height:100vh;不然bindscroll事件无法触发 */
page{
height:100vh;
}
.container{
height:100vh;
}
/* 隐藏滚动条 */
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
.content_item{
line-height:300rpx;
border: 1rpx solid #eee;
margin-bottom: 20rpx;
text-align: center;
}
.top_back{
padding: 10rpx 20rpx;
position: fixed;
bottom: 30rpx;
right: 50rpx;
background-color: #aaa;
color: white;
}
wx.pageScrollTo回到顶部
<view class="container" >
<view class="content">
<view class="content_item">1</view>
<view class="content_item">2</view>
<view class="content_item">3</view>
<view class="content_item">4</view>
<view class="content_item">5</view>
</view>
<view class="top_back" bindtap='gotop'>
回到顶部
</view>
</view>
// 当前滚动条的位置获取
onPageScroll(e){
console.log(e.scrollTop)
},
gotop(e){
if (wx.pageScrollTo) {
wx.pageScrollTo({
scrollTop: 0
})
} else {
wx.showModal({
title: '提示',
content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
})
}
}
scroll-view回到顶部
注:这里必须给要滑动的元素和page设置高,在前面的css代码中有提到。
<scroll-view class="container" scroll-y scroll-top='{{scrollTop}}' bindscroll="scroll">
<view class="content">
<view class="content_item">1</view>
<view class="content_item">2</view>
<view class="content_item">3</view>
<view class="content_item">4</view>
<view class="content_item">5</view>
</view>
<view class="top_back" bindtap='gotop'>
回到顶部
</view>
</scroll-view>
data: {
scrollTop:0
},
// 当前滚动条的位置获取
scroll(e){
console.log(e.detail.scrollTop)
},
gotop(e){
var that=this;
that.setData({
scrollTop: 0
});
}