html css JS 怎么设计点击回顶部效果？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html css JS 怎么设计点击回顶部效果？相关的知识，希望对你有一定的参考价值。
设计一种如图的圆形点击按钮，始终保持在页面右下角，点击可回到页眉效果，求大神示例代码或者JS。
点击回顶部，或是回某个位置，主要是设置scrollTop。
下面是一个简单回顶的例子：
下面的例子是缓慢回顶。如果将快速回顶，可以直接让scrollTop = 0；就可以了。
<style>bodyheight:5000px;
input position:fixed; bottom:0px; right:0px;
</style>
<script>
window.onload=function()
var oBtn = document.getElementById(\'btn\');
var timer = null;
var bFlag = false;
oBtn.onclick=function()
moveScroll(0,3000);
;
window.onscroll=function()
if(bFlag)
clearInterval(timer);
bFlag=true;
;
function moveScroll(target,time)
var start = document.documentElement.scrollTop || document.body.scrollTop;
var dis = target - start;
var count = Math.floor(time/30);
var n=0;
clearInterval(timer);
timer = setInterval(function()
n++;
bFlag=false;
document.documentElement.scrollTop = start + dis*n/count;
document.body.scrollTop = start+dis*n/count;
if(n==count)
clearInterval(timer);
,30);
;
</script> 参考技术A
返回顶部效果思路：(无需js，直接使用html)
1、在源代码里顶部代码中添加一个<a name="#top"></a>标签锚点；
2、添加一个<a href='#top'>返回顶部</a>；
html代码：
<a name="#top"></a><br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<a href="#top"/>返回顶部</a> 参考技术B
js代码：
function pageScroll()//把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数）
window.scrollBy(0,-100);
//延时递归调用，模拟滚动向上效果
scrolldelay = setTimeout('pageScroll()',100);
//获取scrollTop值，声明了DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值
var sTop=document.documentElement.scrollTop+document.body.scrollTop;
//判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面）
if(sTop==0) clearTimeout(scrolldelay);
html代码：
<a onclick="pageScroll()" class="return-top"></a>追问js功能看懂了，那请问怎么设计一个圆形的点击按钮并且始终保持在页面右下角那? 链接的class="return-top" 这个样式怎么写？
追答position:fixed;始终在固定位置显示，还有就是用js控制，滚动条滚动到固定位置才出现的..
本回答被提问者和网友采纳 参考技术C 可以通过锚点来实现 设计锚点的页面转向为页首标签就可以 参考技术D 很简单的方式<a href='#">toTop</>小程序实现顶部选中效果
一、效果演示
二、功能代码
1.设计思路
1.首先设计完大体框架：
全部、待支付、待发货、已发货、交易成功这五个部分都是单独的view分开来装的，在大的view中有设置了下边框
2.选中的时候通过给选中的view修改样式来实现一个选中效果，需要用js来实现样式的改变
2.相关代码
1.Html代码
<view class="topView" style="position:fixed;top:49px;left:0;z-index:200">
<block wx:for="{{statusList}}" wx:key="id">
<view id="{{item.id}}" class="{{item.id == isChecked ? 'active':''}} topChild" bindtap="choiceStatus">{{item.statusName}}</view>
</block>
</view>
2.CSS代码
.topView{
width:100%;
height:48px;
display:flex;
background-color: #ffffff;
border-bottom:1px solid #e2e1e1;
}
.topChild{
width:20%;
height:48px;
text-align: center;
line-height: 3.4;
font-size:14px;
color:#333333;
}
/*点击时按钮状态*/
.active{
color:#2dbef8;
border-bottom:2px solid #2dbef8;
}
3.JS代码
Page({
data: {
statusList: [{//顶部状态按钮
"statusName": "全部",
"id": "all"
},
{
"statusName": "待支付",
"id": "draft"
},
{
"statusName": "待发货",
"id": "waitSolve"
},
{
"statusName": "已发货",
"id": "doingSolve"
},
{
"statusName": "交易成功",
"id": "doneSolve"
},
],
isChecked: 0 //判断是否选中
},
//绑定顶部状态切换的点击事件
choiceStatus: function (e) {
var that = this;
var code = e.currentTarget.id;
that.setData({
isChecked: code
})
},
})
3.涉及到的其它知识
1.view的多样式
大家直接看class后面的部分，可以看见class后面不止一个样式类
<view id="{{item.id}}" class="{{item.id == isChecked ? 'active':''}} topChild"
bindtap="choiceStatus">{{item.statusName}}</view>
小结：
1.class中可以包含多个样式，多个样式之间用空格隔开
2. ‘’代表的是空样式
2.wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
比如当前switch是选中状态，如果没有设置wx:key，状态可能会发生改变，所以设置wx:key可以用来保持自己的特征和状态，并且在下次渲染时不会重新创建，提高了列表渲染时的效率。
详细的wx:key参考博客
点我跳转
以上是关于html css JS 怎么设计点击回顶部效果？的主要内容，如果未能解决你的问题，请参考以下文章