原生js回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.test{
background: #ff0000;
width:100%;
height: 5000px;;
}
.top{
width:50px;
height:50px;
position: fixed;
right:20px;
bottom:20px;
background: #424242;
line-height: 50px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div class="test">
<div class="top">click me</div>
</div>
<script type="text/javascript">
var clickBtn=document.getElementsByClassName("top")[0];
var timer=null;
clickBtn.addEventListener("click",function () {
timer=setInterval(function(){
scrollTopm=document.body.scrollTop;
if(scrollTopm<=0){clearTimeout(timer);}
else{
document.documentElement.scrollTop = document.body.scrollTop =scrollTopm/3; //剩余距离的三分之一回到顶部
} ,200});
}
</script>
</body></html>
原生js回到顶部的更多相关文章
- 详解原生JS回到顶部
第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...
- js回到顶部------转载
[1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意] ...
- js回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS回到顶部代码小记
HTML: <div id="goTop"> <a href="#top"><img src="~/Content/th ...
- 原生js返回顶部（匀速、由快到慢）
在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...
- css+js回到顶部
.backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; c ...
- 原生JS返回顶部，带返回效果
有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要 ...
- js回到顶部 动画速度 （自己记录）
x=x-20; 设置回到每10s的速度, function gotoTop(){ var x=document.body.scrollTop||document.documentElement.scr ...
- JS 回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Elasticsearch + Logstash + Kibana 搭建教程
# ELK:Elasticsearch + Logstash + Kibana 搭建教程 Shipper:日志收集者.负责监控本地日志文件的变化,及时把日志文件的最新内容收集起来,输出到Redis暂存 ...
- flume采集微信小程序数据
flume采集微信小程序数据 flume收集前端埋点数据[1]POST请求http://f.x.com:50000数据格式: JsonArray数据格式示例:[{ "headers" ...
- Redis persistence demystified
https://redis.io/topics/persistence http://oldblog.antirez.com/post/redis-persistence-demystified.ht ...
- moving from a host-centric infrastructure to a container-centric infrastructure
https://kubernetes.io/docs/concepts/overview/what-is-kubernetes/ Why do I need Kubernetes and what c ...
- Hadoop实战-MapReduce之max、min、avg统计(六)
1.数据准备: Mike,35 Steven,40 Ken,28 Cindy,32 2.预期结果 Max 40 Min 28 Avg 33 3.MapReduce代码如下 import ja ...
- Mongoose中的关联表查询 && 聚合查询
注:阅读此篇文章,需要有一定的Mongo基础.基本的不会再重复介绍. 例: 有两张表,一张是博客列表,另外一张是博客的标签表.现在我们要做两张表的插入和关联查询. 创建两张表的Schema 主表bl ...
- Linux环境下安装Tomcat
一.准备安装的tar包 1.将安装包放在服务器上:apache-tomcat-7.0.81.tar.gz 2.将安装包解压:tar -zxvf apache-tomcat-7.0.81.tar.gz ...
- 对于atomic nonatomic assign retain copy strong weak的简单理解
atomic和nonatomic用来决定编译器生成的getter和setter是否为原子操作 1)atomic 设置成员变量的@property属性时,atomic是默认值,提供多线程安全 在多线程环 ...
- JavaScript中浮点数的保留小数位数的问题
方法一 简介:如题! 繁琐版... 代码如下: var significantFigure= function(value,figure){ var arr=(valu ...
- Android Studio 使用Gradle多渠道打包
第一步:配置AndroidManifest.xml 以友盟渠道为例,渠道信息一般都是写在 AndroidManifest.xml文件中,大约如下: <meta-data android:name ...