JavaScript实现返回顶部按钮

利用滚动事件（scroll)和点击事件(onclick)实现返回顶部按钮

1.当滚动的到某个位置出现返回顶部按钮

2.点击返回顶部按钮，立即跳到最顶部。

代码实现如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;font-size: 30px;}.box{width: 1000px;height: 100px;margin: 0 auto;background: #0f9;}.box1{width: 1000px;height: 400px;margin: 0 auto;background: #ff0;}.box2{width: 1000px;height: 800px;margin: 0 auto;background: #f0f;}.btn{display: none;width: 100px;height:100px;line-height: 50px;text-align: center;background: blueviolet;font-size: 36px;position: absolute;top: 400px;right: 30px;cursor: pointer;}</style>
</head>
<body><div class="box">导航栏</div><div class="box1">轮播区域</div><div class="box2">内容区域</div><div class="btn">返回顶部</div>
</body>
<script>var box1=document.querySelector('.box1');var btn=document.querySelector('.btn');var to=box1.offsetTop;//获取box1距离父级元素垂直距离document.addEventListener('scroll',function(){//给页面添加事件绑定（滚动事件，回调函数）console.log(1);if (window.pageYOffset>=to) {//window.pageYoffset整个页面垂直方向卷入btn.style.display='block';btn.style.position='fixed'//启动固定定位}else{btn.style.display='none';}})btn.onclick=function() {//点击btn返回顶部document.documentElement.scrollTop = 0;//获取滚动条距离（当滚动条条距离为0，到最顶部）}
</script>
</html>

JavaScript实现返回顶部按钮相关推荐

jq实现页面滑动到一定位置显示返回顶部按钮，点击回到页面顶部
返回顶部按钮固定在页面某个位置,当页面滑动超过600时,显示此按钮,可用jq的scrollTop()方法实现: 点击触发click事件,并返回到页面顶部,这里设置返回顶部的时间是1000ms(即1s) ...
在octopress中增加“返回顶部”按钮
为什么80%的码农都做不了架构师?>>> <div id="main"><article class="hentry" ...
小程序 WXS响应事件（超出两屏显示返回顶部按钮）
小程序 WXS响应事件(超出两屏显示返回顶部按钮) 两种解决办法: view页面形式实现: <wxs module="test" src="./test.wxs&q ...
javascript 设置返回顶部的效果
动态效果要求: 点击按钮之后可以由快到慢地回到顶部,处于顶部位置时按钮消失,按钮位于页面的右下方实现原理: 设置对返回顶部按钮的单机响应函数在此函数内部定一个返回顶部计时器 returnTop 在 ...
html5 回到顶部按钮,“返回顶部”按钮效果
"返回顶部"按钮效果 pc端: 返回顶部 .wrapper { width: 1150px; height: 3582px; border: 2px solid black; } ...
js浏览器回到顶部方法_js 返回顶部按钮
要求:当鼠标从顶部滚动后,显示返回顶部按钮,点击按钮,页面平滑滚动到顶部,按钮隐藏. 1.css #scrollTop{position:fixed;bottom:20px;right:20px;he ...
jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
转载自:老驴的博客 jQuery脚本: 1 <script type="text/javascript">2$(function() {3 var scrollDiv ...
js编写简易返回顶部按钮
之前ui设计让我做个返回顶部的按钮,我一定头绪都没,感觉真要加上这个功能,自己编写就得一个下午,工作量大为由,所以就推脱了; 当静下心,有时间捣鼓之后才发现原来so easy!!! 以下是我的js代码 ...
html设置返回首页,html页面添加返回顶部按钮
利用 jQuery 中的 animate 和 scrollTop 方法,你无需插件就可以创建简单的 scroll up 效果:// 返回顶部$('a.top'). html:css:.box {wid ...

JavaScript实现返回顶部按钮

JavaScript实现返回顶部按钮相关推荐

最新文章

热门文章