我这里用的很简单 跟之前搜索之后跳到搜索结果位置一样 锚点
<a class=" layui-icon layui-icon-up" href="#head" style="font-size: 32px;color: rgb(242, 246, 248);"></a>
然后有一个悬浮显示TOP
.toolbars-footer{
position: absolute;
bottom: 0;
right: 0;
background-color: rgb(80, 136, 97);
width: 34px;
height: 35px;
z-index: 3;
}
.toolbars .flex{
position: absolute;
top: 0;
right: 34px;
width: 0;
overflow: hidden;
height: 35px;
line-height: 35px;
background-color: #b61d1d;
text-align: center;
color: #fff;
z-index: -1;
transition: width .3s;
}
.toolbars-footer:hover{
background-color: #b61d1d;
}
.toolbars-footer:hover .flex{
width: 60px;
background-color: #b61d1d;
}
结果图:
ps.还有几个其他方法,记录一哈
2.
scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时,scrollTop的值为0,如果元素被垂直滚动了,scrollTop的值大于0,且表示元素上方不可见内容的像素宽度
由于scrollTop是可写的,可以利用scrollTop来实现回到顶部的功能
<body style="height:2000px;"> <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button> <script> test.onclick = function(){ document.body.scrollTop = document.documentElement.scrollTop = 0; } </script> </body>
3.
scrollTo()
scrollTo(x,y)方法滚动当前window中显示的文档,让文档中由坐标x和y指定的点位于显示区域的左上角
设置scrollTo(0,0)可以实现回到顶部的效果
<body style="height:2000px;"> <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button> <script> test.onclick = function(){ scrollTo(0,0); } </script> </body>
4.
scrollBy()
scrollBy(x,y)方法滚动当前window中显示的文档,x和y指定滚动的相对量
只要把当前页面的滚动长度作为参数,逆向滚动,则可以实现回到顶部的效果
<body style="height:2000px;"> <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button> <script> test.onclick = function(){ var top = document.body.scrollTop || document.documentElement.scrollTop scrollBy(0,-top); } </script> </body>
5.
scrollIntoView()
Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域
该方法可以接受一个布尔值作为参数。如果为true,表示元素的顶部与当前区域的可见部分的顶部对齐(前提是当前区域可滚动);如果为false,表示元素的底部与当前区域的可见部分的尾部对齐(前提是当前区域可滚动)。如果没有提供该参数,默认为true
使用该方法的原理与使用锚点的原理类似,在页面最上方设置目标元素,当页面滚动时,目标元素被滚动到页面区域以外,点击回到顶部按钮,使目标元素重新回到原来位置,则达到预期效果
<body style="height:2000px;"> <div id="target"></div> <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button> <script> test.onclick = function(){ target.scrollIntoView(); } </script> </body>
学习链接:https://www.cnblogs.com/libin-1/p/5836483.html