JS原生回到顶部效果
- // 回到顶部
- onload = function () {
- var oBtnTop = document.getElementById('toTop');
- var timer = null;
- oBtnTop.onclick = function () {
- moveScroll(0, 500);
- return false;
- };
- function moveScroll( iTarget, time ) {
- // 起点
- var start = document.documentElement.scrollTop || document.body.scrollTop;
- // 距离
- var dis = iTarget - start;
- // 次数
- var count = Math.round( time / 30 );
- var num = 0;
- console.log(start);
- clearInterval(timer);
- timer = setInterval(function() {
- num += 1;
- // 匀减速
- var a = 1 - num / count;
- var cur = start + dis*( 1 - Math.pow(a,3));
- document.documentElement.scrollTop = cur;
- document.body.scrollTop = cur;
- if( num == count ){
- clearInterval(timer);
- }
- }, 30)
- }
- };
JS原生回到顶部效果的更多相关文章
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js原生回到顶部
<!DOCTYPE html><html><head> <meta content="测试demo" name="Keyword ...
- 页面滚动事件和利用JS实现回到顶部效果
页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...
- js原生回到顶部,并平滑过渡---- 记录
window.scrollTo({ top: 0, behavior: 'smooth', });
- javascript 特效实现(2)——回到顶部效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery实现"跳到底部","回到顶部"效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js——页面回到顶部
很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...
- 手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
- js实现回到顶部功能
js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...
随机推荐
- Shader中贴图知识汇总: 漫反射贴图、凹凸贴图、高光贴图、 AO贴图、环境贴图、 光照纹理及细节贴图
原文过于冗余,精读后做了部分简化与测试实践,原文地址:http://www.j2megame.com/html/xwzx/ty/2571.html http://www.cnblogs.com/z ...
- 全面理解面向对象的 JavaScript
前言 当今 JavaScript 大行其道,各种应用对其依赖日深.web 程序员已逐渐习惯使用各种优秀的 JavaScript 框架快速开发 Web 应用,从而忽略了对原生 JavaScript 的学 ...
- python 电影下载链接爬虫
V1.0 功能:从比较知名的几个电影下载网站爬取下载链接,并自动打印出来: 代码: # -*- coding: utf8 -*- from bs4 import BeautifulSoup impor ...
- 笔记5:QQ群聊天机器人
之前经常在别人群里看到有自动回复消息的机器人. 功能有好多,可以玩各种游戏.觉得还蛮有意思的.. 于是就去请教别人怎么弄得,但是他们都说得好复杂,好高大上,无非就是不想让别人弄 本人是个不会轻易放弃的 ...
- case when 对某个字段值分类讨论
SELECT SM_ID,SM_CID,SM_STATION,SM_TIME,PS_CODE,PS_NUMBER,SS_NAME,SS_CODE, ( THEN '中转站' END) FROM dbo ...
- override和overload的区别
override(重写,覆盖) 1.方法名.参数.返回值相同. 2.子类方法不能缩小父类方法的访问权限. 3.子类方法不能抛出比父类方法更多的异常(但子类方法可以不抛出异常). 4.存在于父类和子类之 ...
- GPOR
[tengzhenzhen15@lu01 gpor]$ for ((i=0; i<=19; i++)) do ./gpor -S 0.4 X4058_300_gpor/mytask_train. ...
- CI框架 数据库批量插入 insert_batch()
使用CI框架的AR操作:insert_batch()可以减少访问数据库的次数.一次访问即可. 示例1: $data = array( array( 'title' => 'My title' , ...
- CI框架 输入类
1.$this->input->post() 第一个参数是所要取得的post中的数据: $this->input->post('some_data'); 如果数据不存在,方法将 ...
- BZOJ4006 [JLOI2015]管道连接
裸的状压DP 令$f_S$表示包含颜色集合S的最小斯坦纳生成森林的值,于是有: $$f_S=\min\{f_S,f_s+f_{S-s}|s\subset S\}$$ 然后嘛...还是裸的斯坦纳树搞搞. ...