JS返回顶部实例代码

(编辑：jimmy 日期: 2024/11/20 浏览：3 次 )

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

html/css部分

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="/UploadFiles/2021-04-02/返回顶部效果.js">

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);
 }
}



学习视频地址
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：vue 1.x 交互实现仿百度下拉列表示例
下一篇：VUE2实现事件驱动弹窗示例