编程 Javascript

JS返回顶部实例代码

Posted in Javascript onAugust 09, 2020

本文实例为大家分享了JS返回顶部实例代码，供大家参考，具体内容如下

html/css部分

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="返回顶部效果.js"></script>
<style>
 .container{
 width:1190px;
 margin: 0px auto;
 }
 .container a{
 display: none;
 width:40px;
 height:40px;
 background: url(/535e0dc100010e9c00400080.jpg) no-repeat;
 position: fixed;
 left:95%;
 bottom: 50px;
 }
 .container a:hover{
 background: url(/535e0dc100010e9c00400080.jpg) no-repeat;
 background-position: left -40px;
 }
</style> 
</head>
<body>
 <div class="container">
 <img src="/535e0ce800015b7511902787.jpg" alt="">
 <a id="btn" href="javascript:" class="btn" title="回到顶部"></a>
 </div>
</body>
</html>

JS部分

window.onload=function(){
 var obtn=document.getElementById("btn");
 var clientHeight=document.documentElement.clientHeight||ocument.body.clientHeight;
 var isTop=true;
 var timer=null;
 window.onscroll=function(){
 var topH=document.documentElement.scrollTop||document.body.scrollTop;
 if(topH>clientHeight){
 obtn.style.display="block";
 }else{
 obtn.style.display="none";
 }
 }
 obtn.onclick=function(){
 timer=setInterval(function(){
 var topH=document.documentElement.scrollTop||document.body.scrollTop;
 var stepLength=Math.ceil(topH/5);
 document.documentElement.scrollTop=document.body.scrollTop=topH-stepLength;
 if(topH==0){
 clearInterval(timer);
 }
 },30);
 }
}

学习视频地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JS返回顶部实例代码

- Author -

数星星的咚咚咚

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS获取scrollHeight问题想到的标准问题

May 27 Javascript

jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)

May 24 Javascript

js播放wav文件(源码)

Apr 22 Javascript

js阻止事件追加的具体实现

Oct 15 Javascript

js中计算两个日期间的工作日的简单实例

Aug 08 Javascript

微信开发使用picker封装省市区三级联动模板

Oct 28 Javascript

JS中Array数组学习总结

Jan 18 Javascript

jQuery学习之DOM节点的插入方法总结

Jan 22 Javascript

jquery封装插件时匿名函数形参和实参的写法解释

Feb 14 Javascript

使用async、enterproxy控制并发数量的方法详解

Jan 02 Javascript

详解Angular如何正确的操作DOM

Jul 06 Javascript

vue组件文档（.md）中如何自动导入示例（.vue）详解

Jan 25 Javascript

VUE2实现事件驱动弹窗示例

Oct 21 #Javascript

vue+socket.io+express+mongodb 实现简易多房间在线群聊示例

Oct 21 #Javascript

vue使用keep-alive实现数据缓存不刷新

Oct 21 #Javascript

详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

Oct 21 #Javascript

Vue filter介绍及其使用详解

Oct 21 #Javascript

详解node nvm进行node多版本管理

Oct 21 #Javascript

JS实现瀑布流布局

Oct 21 #Javascript