原生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 ...
随机推荐
- IOS开发之Iphone和Ipad应用程序图标和启动动画
本文转载至 http://blog.csdn.net/yesjava/article/details/8782060 当我们用xcode开发iphone和ipad应用程序的时候,我们可以用一下表中所显 ...
- mybatis学习总结（一）——简介
基本构成 SqlSessionFactoryBuilder(构造器):它会根据配置信息或者代码来生成SqlSessionFactory(工厂接口) SqlSessionFactory:依靠工厂来生成S ...
- go签名算法设计
Go by Example 中文:Base64编码 https://books.studygolang.com/gobyexample/base64-encoding/
- linux jdk更换
有时候会发现,安装了新的jdk,而java -version 之后发现仍旧是旧的jdk,即使自己已经更新了JAVA_HOME的环境变量,解决方法如下: 具体如下: 1. 查看相应的jdk是否在 ubu ...
- Automating hybrid apps
Automating hybrid apps One of the core principles of Appium is that you shouldn’t have to change you ...
- progressbar请求数据 加载demo1
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout ...
- Masonry库的使用
Github 简要 自动布局最重要的是约束:UI元素间关系的数学表达式.约束包括尺寸.由优先级和阈值管理的相对位置.它们是添加剂,可能导致约束冲突 .约束不足造成布局无法确定 .这两种情况都会产生异常 ...
- Ubuntu Linux系统环境变量配置文件【转】
本文转载自:https://my.oschina.net/qinlinwang/blog/30471 Ubuntu Linux系统环境变量配置文件: /etc/profile : 在登录时,操作系统 ...
- CSS3学习笔记（2）—左右跳动的红心
还在为无法表达内心澎湃的心情而着急吗?还在为制作跳动的心而烦恼吗?哈哈,今天我就把代码全部奉上,为你们追妹子添点贡献,下面来看最终的动态效果(事先说明一下:我用的截屏gif制作软件是绿色版的,所以gi ...
- @SuppressWarnings("serial")注解
@SuppressWarnings J2SE 提供的一个批注或者注解.该批注的作用是给编译器一条指令,告诉它对被批注的代码元素内部的某些警告保持静默,即忽略这些警告信息. 在平常的编码过程中,我们经常 ...