“回到顶部”功能

最新推荐文章于 2023-01-11 19:36:58 发布

今天可以暴富吗

最新推荐文章于 2023-01-11 19:36:58 发布

阅读量711

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/weixin_38233549/article/details/90206705

版权

web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

“回到顶部”功能

浏览器“回到顶部”
小程序“回到顶部”
- wx.pageScrollTo回到顶部
- scroll-view回到顶部

浏览器“回到顶部”

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
  });
}