制作浏览网页时返回页面顶部按钮
发布时间
阅读量：
阅读量
这个暑假跑去领略了大西北的风景，没什么时间也变懒了，现在在做一个小项目，发现很多网页你浏览的时候都会有返回页面顶部的按钮，现在在这里总结一下
返回顶部按钮
- 制作返回顶部按钮
- 当浏览页面到第二页的时候显示返回顶部按钮，否则隐藏
点击返回顶部按钮返回到页面顶部
使用getScrollTop()函数
html代码
<body>
<p>向下拖动滚动条（进入第二屏），右下角会出现“返回顶部”图标</p>
<img src="images/totop.png" id="toTop"/>
</body>css样式代码
*{
margin:0;
padding: 0;
}
body{
height: 4000px;
}
#toTop{
position: fixed;
right:30px;
bottom:40px;
cursor: pointer;
display: none;
}js代码
window.onload = function (){
var scrollEle = clientEle = document.documentElement,
toTopBtn = document.getElementById("toTop"),
compatMode = document.compatMode,
isChrome = window.navigator.userAgent.indexOf("Chrome") === -1 ? false : true;
//不同渲染模式以及Chrome的预处理
if(compatMode === "BackCompat" || isChrome)
scrollEle = document.body;
if(compatMode === "BackCompat")
clientEle = document.body;
//返回顶部按钮的点击响应（注册函数），时间间隔和高度缩减率可以调节
toTopBtn.onclick = function(){
var moveInterval = setInterval(moveScroll, 10);
function moveScroll() {
setScrollTop(getScrollTop() / 1.2);
if(getScrollTop() === 0)
clearInterval(moveInterval);
}
}
//滚动时判断是否显示返回顶部按钮（注册函数）
window.onscroll = function() {
var display = toTopBtn.style.display;
if(getScrollTop() > getClientHeight()) {
if(display === "none" || display === "")
toTopBtn.style.display = "block";
} else{
if(display === "block" || display === "")
toTopBtn.style.display = "none";
}
}
//获取和设置scrollTop
function getScrollTop() {
return scrollEle.scrollTop;
}
function setScrollTop(value){
scrollEle.scrollTop = value;
}
//获取当前网页的展示高度（第一屏高度），此处Chrome正常
function getClientHeight(){
return clientEle.clientHeight;
}
}最后看一下运行效果
点击图片就会返回到页面顶部了
全部评论 (0)
还没有任何评论哟~