前端点击回到当前页顶部
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端点击回到当前页顶部相关的知识，希望对你有一定的参考价值。
参考技术A 【1】锚点使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置
【2】scrollTop
scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度
由于scrollTop是可写的，可以利用scrollTop来实现回到顶部的功能
【3】scrollTo()
scrollBy(x,y)方法滚动当前window中显示的文档，x和y指定滚动的相对量
只要把当前页面的滚动长度作为参数，逆向滚动，则可以实现回到顶部的效果
【5】scrollIntoView()
Element.scrollIntoView方法滚动当前元素，进入浏览器的可见区域
该方法可以接受一个布尔值作为参数。如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。如果没有提供该参数，默认为true
使用该方法的原理与使用锚点的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部按钮，使目标元素重新回到原来位置，则达到预期效果
点击回到顶部的按钮
在很多网站页面中如果我们把页面下拉很多的时候，右边一般都有一个按钮点击可以直接回到顶部，并且无论滚动条下拉多少这个小方块都保持在右边画面中心
简单分析下我们知道，这个小方块是绝对定位，当我们拉动滚动条的时候获取滚动的距离，然后让方块的top值等于滚动的距离。触发方块的点击事件时让top值为0
一 html && css 代码如下：
<style>
#box{width:100px;height: 100px;background: red;position: absolute;right:0;}
</style>
</head>
<body style="height:3000px;">
<div>我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部</div>
<div id="box"></div>
</body>
二 js代码如下：
//回到顶部那个小方块必须在浏览器可视区的正中间
//获取可视区的高度的一半减去元素的高度的一半 (当前元素就会在浏览器的正中央)
var iH = document.documentElement.clientHeight/2-box.offsetHeight/2;
box.style.top = iH+‘px‘;
window.onscroll = function(){
//滚动的时候获取滚动条的滚动距离
var t = document.documentElement.scrollTop || document.body.scrollTop;
//小方块的top值就等于 iH+ 滚动条的滚动距离 滚动条拉动然后页面往下拉同时小方块的top值同步变化才能保持在可视区域的中央所以top值要加上滚动距离
box.style.top = t+iH+‘px‘;
}
box.onclick = function(){
//让滚动条的滚动距离为0就可以回到顶部了
document.documentElement.scrollTop = document.body.scrollTop = 0
}
/*var iH=document.documentElement.clientHeight/2-box.offsetHeight/2;
box.style.top=iH+"px";
window.onscroll=function(){
var t=document.documentElement.scrollTop||document.body.scrollTop;
box.style.top=iH+t+"px";
}
box.onclick=function(){
document.documentElement.scrollTop=document.body.scrollTop=0
}
以上是关于前端点击回到当前页顶部的主要内容，如果未能解决你的问题，请参考以下文章
前端react框架下，render渲染刷新分页后总会跳到第一页，怎样可以刷新后留在当前页？
datalist中有分页，如果在第二页删除一条数据，怎么让它刷新后又回到当前页面