原生js实现返回顶部特效
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link herf="index.css">
</head>
<body>
<span id="icon"></span>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<p>我是程序员,平凡有一点理想,渴望让世界不一样!</p>
<script src="scroll.js"></script>
<script src="index.js"></script>
</body>
</html>
index.css
*{
padding:;
margin:;
border: none;
list-style: none;
}
body{
background-color: #ddd;
}
p{
text-align: center;
font-size: 25px;
margin-bottom: 30px;
}
#icon{
width: 43px;
height: 43px;
background: url("./images/to_top.png") no-repeat;
background-size: 100% 100%;
position: fixed;
bottom: 15px;
right: 20px;
display: none; }
index.js
window.onload=function(){
//定义变量
let scroll_top=0;
let begin=0,end=0,timer=null;
//监听窗口滚动事件
window.onscroll=function(){
scroll_top=scroll().top;
//显示和隐藏
scroll_top>0?show($("icon")):hidden($("icon"));
}
//监听图标的点击事件
$("icon").onclick=function(){
//清除定时器
clearInterval(timer);
//开启定时器
timer=setInterval(function(){
begin+=(end-begin)*0.2;
window.scrollTo(0,begin);
//判断运动结束条件,清除定时器
if(Math.round(begin)===end){
clearInterval(timer);
} },30);
}
}
function $(id){
return typeof id==="string"?document.getElementById(id):null;
}
function show(obj){
return obj.style.display="block";
}
function hidden(obj){
return obj.style.display="none";
}
scroll.js
function scroll(){
if(pageYOffset!==null){
return {
top:window.pageYOffset,
left:window.pageXOffset
}
}else if(document.compatMode===CSS1Compat){
return {
top:document.documentElement.scrollTop,
left:document.documentElement.scrollLeft
}
}
return {
top:document.body.scrollTop,
left:document.body.scrollLeft
}
}
原生js实现返回顶部特效的更多相关文章
- 基于原生js的返回顶部组件,兼容主流浏览器
基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...
- 原生JS实现返回顶部和滚动锚点
;(function (window,doc,undefined) { function rollingAnchor(){ this.timer =''; } rollingAnchor.protot ...
- js实现返回顶部功能的解决方案
很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...
- JavaScript返回顶部特效
样式: <style type="text/css"> /*返回顶部特效*/ a { border: none; text-decoration: none; outl ...
- jquery返回顶部特效
<style> p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; } p#back-to-top ...
- 前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...
- js网页返回顶部和楼层跳跃的实现原理
这是简单的效果图. (实现楼层间的跳跃,主要依靠的是 window.scrollTo(x,y)方法 ,将浏览器的可见区域移动到指定的x,y坐标上.) 说楼层跳跃前,先温习下,一般网页在高度较大时, ...
- 【转】用jquery编写动态的返回顶部特效
jquery代码: function gotoTop(min_height){ //预定义返回顶部的html代码,它的css样式默认为不显示 var gotoTop_html = '<div i ...
- WEB前端--返回顶部特效源码
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
随机推荐
- tomcat设置开机自动启动
windows下: 1 命令cmd 进入 磁盘: 回车 2 tomcat\bin目录 回车 3 service.bat install (注:tomcat一定要有service.bat ...
- 文件操作命令(del)
del 命令: // 描述: 删除一个或多个文件.同等于 erase 命令. 相比较 rd 命令来说,del 命令只能删除文件,不能删除文件夹. // 语法: del [/p] [/f] [/s] [ ...
- kvm 客户机加载移动硬盘
1,宿主机安装usbutils yum install usbutils -y 2,插入U盘或者移动硬盘并查看 [root@localhost ~]# lsusb Bus Device : ID 10 ...
- Atom使用
cmd-r 通过方法名查找 ctrl-option-g 跳转至光标所在方法或结构 安装 last-cursor-position 后 alt-- 返回至光标上一次所在位置
- sql_calc_found_rows原理
- #实验三 敏捷开发与XP实践---实验报告
一.实验三 敏捷开发与XP实践-1 1.实验要求 -实验三 敏捷开发与XP实践 http://www.cnblogs.com/rocedu/p/4795776.html, Eclipse的内容替换成I ...
- centos7安装ceph-luminous(1 mon+2 osd)
说明:由于环境有限,这里只是用一台机器 一.部署环境 VMware Workstation 10 centos7 二.主机配置 主机名 ip cpu ram master 192.168.137.10 ...
- 解决Eclipse中无法直接使用Base64Encoder的问题(转载)
资源出处:https://blog.csdn.net/u011514810/article/details/72725398 Base64的加密解密都是使用sun.misc包下的BASE64Encod ...
- HTML 列表中的dl,dt,dd,ul,li,ol区别及应用
无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记. 无序列表始于 <ul> 标签.每个列表项始于 <li>. 有序列表 同样,有序列表也是 ...
- django2+python3+uwsgi+centos7部署网站
Centos7中安装Python虚拟环境 2018年08月27日 00:09:36 kaichenkai 阅读数:984 1.为什么要搭建虚拟环境? 问题:如果在一台电脑上, 想开发多个不同的项目, ...