原生JS返回顶部,带返回效果
有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了。那这个功能是怎么做到的呢。其实不算太难;
首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要什么样式都可以自己写上,再在上面设置一个id;
之后我们js中获取一下这个按钮的id,并且定义一个变量timer,方便接下来清除间隔器;
之后我们设置一个页面的滚动事件,在里面定义一个变量获取一下所滚动的高度;
再用一个判断语句来判断一下滚动的高度;我们在设置一个数来让按钮什么时候显示;
var oBtn = document.getElementById("btn");
var timer;
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > 500){
oBtn.style.display = 'block';
}else{
oBtn.style.display = 'none';
}
}
之后在给按钮设置一个点击事件,我们要先清除一下间隔器来防止bug的出现,在判断一下现在所处的位置;再用一个变量来获取一下需要移动的距离;
之后再用一个变量来获取一下步长,再用一个变量来计算次数;之后设置一个间隔器,首先计算一下次数来,知道每次移动到什么位置,之后计算每次的位置,之后判断一下是否移动到顶部就行了
oBtn.onclick = function(){
clearInterval(timer);
var start = document.documentElement.scrollTop || document.body.scrollTop;
var dis = 0 - start;
var count = Math.floor(1000 / 30);
var n = 0;
timer = setInterval(function () {
n++;
var a = 1 - n / count;
var cur = start + (1 - Math.pow(a,3)) * dis;
document.documentElement.scrollTop = document.body.scrollTop = cur;
if(n == count){
clearInterval(timer);
}
},30)
}
原生JS返回顶部,带返回效果的更多相关文章
- 原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...
- js+css实现带缓冲效果右键弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用原生js 实现点击消失效果
JQ版 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...
- 原生js实现简洁的返回顶部组件
本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~(本博客返回顶部的功能就使用的是这个组件) 返回顶部组件是一种极其常见的网页功能,需求简单:页面 ...
- 利用tween,使用原生js实现模块回弹动画效果
最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回 其实这个效果css3就可以很轻松实现,但是公司要求最低兼容i ...
- 详解原生JS回到顶部
第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...
- jquery 如何实现回顶部 带滑动效果
$("#returnTop").click(function () { var speed=200;//滑动的速度 $('body,html').animate({ scrollT ...
- 原生JS实现幻灯片轮播效果
在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo.小试牛刀. 大致效果: html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表. <d ...
- 原生js简单实现拖拽效果
实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...
- 【原生JS】动态分页样式效果
效果图如下: html: <body> <div> <table id="btnbox"> <tbody> <tr>&l ...
随机推荐
- SQL数据库相关
数据库相关知识点 SQL, 对表的理解, 对表的主键, 外键的理解, 视图, 为什么要有视图, 视图有什么功能, 视图与表有什么区别 主键是唯一标识的一条记录,不能重复,不能为空. 表的外键是另一个表 ...
- 可能是最通俗易懂的 Java 位操作运算讲解
https://blog.csdn.net/briblue/article/details/70296326
- ML中Boosting和Bagging的比較
说到ML中Boosting和Bagging,他们属于的是ML中的集成学习,集成学习法(Ensemble Learning) ① 将多个分类方法聚集在一起.以提高分类的准确率. (这些算法能够是不同的 ...
- JavaScript 数组-Array的方法总结
JavaScript中的Array类型是经常用到的,Array类型也提供了很多方法能实现我们需求,下面我们来总结一下 一.创建Array的方法 1.使用Array构造函数 var colors=new ...
- ajax 传递参数中文乱码解决办法
/********Start***********/ /*获取地址栏参数*/ function getRequest(){ var url = location.search; //获取url中&qu ...
- hadoop 调试mapperduce
问题描述 运行hadoop的MapReduce示例,在running job卡住 在页面中显示一直处于 ACCEPTED Applications 状态 修改日志级别export HADOOP_ROO ...
- The Definitive Guide To Django 2 学习笔记(五) 第四章 模板 (一)基本模板系统
引入模板系统的原因,view中引入硬编码并非明智的选择,设计上的任何改变都会需要改动代码.python代码和HTML代码应该分开,这是多数Web站点的共识,分开会提高效率. 基本模板系统 Django ...
- Python-Scrapy创建第一个项目
创建项目 在开始爬取之前,您必须创建一个新的Scrapy项目.进入您打算存储代码的目录中,运行下列命令: scrapy startproject tutorial 1 该命令行将会创建包含下列内容的t ...
- windows 短文件名/短路径名规则
How Windows Generates 8.3 File Names from Long File Names Windows generates short file names from lo ...
- MapReduce实战(一)自定义类型
需求: 处理以下流量数据,第1列是手机号,第7列是上行流量,第8列是下行流量.将手机号一样的用户进行合并,上行流量汇总,下行流量也汇总,并相加求得总流量. 1363157985066 13726230 ...