关键词：
第一步：获取底部的那个按钮对象，默认的情况下那个按钮对象是不可见的。可见的条件的是滚轮距离顶部有距离。
var oBtn=document.getElementById(‘btn1‘);
第二步：添加滚轮事件。
(1). 获取滚轮距离顶部的距离。如果距离大于0，就将按钮对象可见。
var scrollT=document.documentElement.scrollTop||document.body.scrollTop;
if(scrollT >0){
oBtn.style.display=‘block‘;
}else{
oBtn.style.display=‘none‘;
};
第三步：
(1).获取滚动条到顶部的距离，这个距离就是滚动条需要向上滚动到顶部的全部路程。
var scrollT=document.documentElement.scrollTop||document.body.scrollTop;//我们假设是300px
(2).我们的目标是回到顶部，这个时候滚动条距离顶部的距离是0.
(3). 滚动条运动了多少距离。结束位置-开始位置=dis=0-300=-300px;
(4). 确定总共需要运行的次数。
var count=Math.floor(1000/30);
var n=0;
第四步：开定时器运行
(1)定时器每运行一次，n+1(n代表当前走的次数)
(2).我们已经在上面获取了滚动条距离顶部的距离是：
var scrollT=document.documentElement.scrollTop||document.body.scrollTop;//我们假设是300px
(2)计算走的比例，再将比例乘以总共需要走的距离，得到当前走的距离
var a=n/count;
当前走的距离： dis*a;
还剩了多少距离：就是总的距离减去我们刚才走的距离。
cur=scrollT+dis*a;
(3)设置滚动条距离顶部的距离
document.documentElement.scrollTop=document.body.scrollTop=cur;
(4)如果n==count，代表路程全部走完，关闭定时器
if(n==count){
clearInterval(timer);
}
第五步:处理问题
(1). 当onclick事件执行的时候，定时器执行，会触发onscroll事件，setInterval未执行完的时候，onclick不可以再次点击
(2)onscroll事件触发的时候，滚动条往上滚动的过程中，即使setInterval还未执行完，我们也可以通过鼠标滚动，让滚动条再次往下滚动
处理方法：设置开关，控制，当bSin=true的时候，可执行，当bSin=false的时候不可以执行
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input{
position: fixed;
right: 0;
bottom: 0;
display: none;
}
</style>
<script>
window.onload=function(){
var oBtn=document.getElementById(‘btn1‘);
var timer=null;
//bSin是一个标志位
//bSin：true---->代表底部那个按钮对象是可以使用的
//bSin：false---->代表底部那个按钮对象是不可以使用的
var bSin=false;
window.onscroll=function(){
if(bSin){
clearInterval(timer)
}
console.info(1);
bSin=true;
var scrollT=document.documentElement.scrollTop||document.body.scrollTop;
if(scrollT >0){
oBtn.style.display=‘block‘;
}else{
oBtn.style.display=‘none‘;
};
};
oBtn.onclick=function(){
var scrollT=document.documentElement.scrollTop||document.body.scrollTop;
var dis=0-scrollT;
var count=Math.floor(1000/30);
var n=0;
timer=setInterval(function(){
bSin=false;
n++;
var a=n/count;
var cur=scrollT+dis*a;
document.documentElement.scrollTop=document.body.scrollTop=cur;
if(n==count){
clearInterval(timer);
}
},30);
}
};
</script>
</head>
<body style=‘height: 3000px‘>
<input type="button" value="返回顶部" id=‘btn1‘>
</body>
</html>
Python中的几何布朗运动模拟
】Python中的几何布朗运动模拟【英文标题】：GeometricBrownianMotionsimulationinPython【发布时间】：2017-12-1417:37:23【问题描述】：我正在尝试在Python中模拟几何布朗运动，以通过蒙特卡罗模拟为欧洲看涨期权定价。我对Python比较陌生，... 查看详情
杂项：svn-u
ylbtech-杂项：SVN 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 7.返回顶部 8.返回顶部 9.返回顶部 10.返回顶部 11.返回顶部 12.返回顶部 13.返回顶部&nbs... 查看详情
模拟位置，玩运动世界校园
有兴趣可以看看这个：高级点的运动校园破解（抓包分析，伪装数据上传）Android系统：1.安卓手机需要root，怎么root大家可以使用SuperSU，具体教程这里不多说，大家可以自行琢磨。2.安装Xposed框架，这个稍微比较复杂，因为Xposed... 查看详情
java示例代码_在JFC中模拟JDialog运动
java示例代码_在JFC中模拟JDialog运动 查看详情
基于.net的机械运动模拟应用开发(代码片段)
1简介机械运动在物理学中，把一个物体相对于另一个物体位置的变化称作为机械运动，简称运动。机械运动是指一个物体相对于其他物体的位置发生改变,是自然界中最简单,最基本的运动形态.自然界中一切物体都在运动。我们... 查看详情
wpf太阳地球月球运动轨迹模拟(代码片段)
WPF模拟太阳。月球、地球三者运动轨迹的模拟，现在还没有加上太阳自传的动画，有兴趣的可以加上。主要是利用EllipseGeometry实现路径的绘制xaml代码如下：<Windowx:Class="MyFirstWpfApplication.MainWindow"xmlns="h... 查看详情
动画 UIImageView 运动，然后使用 CGRectIntersection
】动画UIImageView运动，然后使用CGRectIntersection【英文标题】：AnimatingaUIImageViewmovementandthenuseCGRectIntersection【发布时间】：2015-07-1519:21:51【问题描述】：我的屏幕顶部有一个UIImageView（棒），当视图出现时，它会在整个屏幕上显示... 查看详情
UICollectionView 顶部栏没有出现在模拟器中
】UICollectionView顶部栏没有出现在模拟器中【英文标题】：UICollectionViewTopBarDoesn\'tAppearInSimulator【发布时间】：2015-11-1919:00:44【问题描述】：我遇到了一个小问题，我的uicollectionviewcontroller顶部栏没有出现在模拟器和设备中。我已... 查看详情
如何让运动画面离开屏幕并让它再次出现
】如何让运动画面离开屏幕并让它再次出现【英文标题】：Howtomakeamovingpicturegooffthescreenandmakeitcomebackagain【发布时间】：2022-01-1118:03:35【问题描述】：我是处理新手，我正在创建这个小游戏，这些棒子试图避开攻击者。我添加了... 查看详情
python布朗运动模拟器，用vpython编写。(代码片段)
如何模拟驾驶员的运动以检查实时跟踪
】如何模拟驾驶员的运动以检查实时跟踪【英文标题】：Howtosimulatethedriver\'smovementtocheckforlivetracking【发布时间】：2021-12-0410:27:47【问题描述】：假设我正在构建一个应用程序，比如说一个披萨外卖应用程序。用户故事：作为用... 查看详情
js返回顶部效果
...浏览的网页过于长的时候，用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部，不仅麻烦，而且用户体验也会很差。现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮，点击... 查看详情
页脚滚动顶部的“返回顶部”
】页脚滚动顶部的“返回顶部”【英文标题】：\'Backtotop\'onscrolltopatfooter【发布时间】：2015-03-0300:39:07【问题描述】：使用我在周围看到的一些示例，当您向下滚动页面时，我有一个返回顶部按钮可以显示和工作，但是有没有办... 查看详情
元素跟随着滚动条运动
有这种情况，页面中的某些元素需要跟随滚动条运动，位置一直在页面中的某个位置；思路：当页面滚动的时候，一直获取滚动条距离顶部的距离，当顶部的距离等于某个数值的时候，直接开始改变这个元素的position的值为fixed,... 查看详情
返回页面顶部最简单方法
返回页面顶部最简单方法<ahref="#">返回页面顶部</a> 查看详情
vue3返回顶部组件及返回顶部js封装(代码片段)
...封装监听页面滚动的js，及页面滚动到一定像素时，显示返回顶部的按钮，点击按钮会有放大的动画，并逐渐滚动到顶部的组件。效果如下：代码封装js，监听屏幕滚动事件，以及是否显示返回顶部的按钮；在项目目录下新建utils... 查看详情
js返回顶部
functiongotoTop(min_height){vargotoTop_html=‘<divid="gotoTop"></div>‘;//定义返回顶部的html标签，默认隐藏 $("body").append(gotoTop_html);//将元素插入页面 $("#gotoTop").click(function(){//定义返回顶部元素的点击事件 $(‘h 查看详情
模拟电子运动-python中具有自适应步长的微分方程
】模拟电子运动-python中具有自适应步长的微分方程【英文标题】：Simulatingelectronmotion-differentialequationwithadaptivestepsizeinpython【发布时间】：2014-11-2116:24:40【问题描述】：我试图模拟强激光的振荡电场如何推动接近+1离子库仑势的... 查看详情