1. // 回到顶部
  2. onload = function () {
  3. var oBtnTop = document.getElementById('toTop');
  4. var timer = null;
  5.  
  6. oBtnTop.onclick = function () {
  7.  
  8. moveScroll(0, 500);
  9. return false;
  10. };
  11.  
  12. function moveScroll( iTarget, time ) {
  13.  
  14. // 起点
  15. var start = document.documentElement.scrollTop || document.body.scrollTop;
  16. // 距离
  17. var dis = iTarget - start;
  18. // 次数
  19. var count = Math.round( time / 30 );
  20. var num = 0;
  21.  
  22. console.log(start);
  23.  
  24. clearInterval(timer);
  25. timer = setInterval(function() {
  26. num += 1;
  27. // 匀减速
  28. var a = 1 - num / count;
  29. var cur = start + dis*( 1 - Math.pow(a,3));
  30.  
  31. document.documentElement.scrollTop = cur;
  32. document.body.scrollTop = cur;
  33.  
  34. if( num == count ){
  35. clearInterval(timer);
  36. }
  37.  
  38. }, 30)
  39.  
  40. }
  41.  
  42. };

  

JS原生回到顶部效果的更多相关文章

  1. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js原生回到顶部

    <!DOCTYPE html><html><head> <meta content="测试demo" name="Keyword ...

  3. 页面滚动事件和利用JS实现回到顶部效果

    页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...

  4. js原生回到顶部,并平滑过渡---- 记录

    window.scrollTo({ top: 0, behavior: 'smooth', });

  5. javascript 特效实现(2)——回到顶部效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jquery实现"跳到底部","回到顶部"效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js——页面回到顶部

    很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...

  8. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  9. js实现回到顶部功能

    js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...

随机推荐

  1. Shader中贴图知识汇总: 漫反射贴图、凹凸贴图、高光贴图、 AO贴图、环境贴图、 光照纹理及细节贴图

    原文过于冗余,精读后做了部分简化与测试实践,原文地址:http://www.j2megame.com/html/xwzx/ty/2571.html   http://www.cnblogs.com/z ...

  2. 全面理解面向对象的 JavaScript

    前言 当今 JavaScript 大行其道,各种应用对其依赖日深.web 程序员已逐渐习惯使用各种优秀的 JavaScript 框架快速开发 Web 应用,从而忽略了对原生 JavaScript 的学 ...

  3. python 电影下载链接爬虫

    V1.0 功能:从比较知名的几个电影下载网站爬取下载链接,并自动打印出来: 代码: # -*- coding: utf8 -*- from bs4 import BeautifulSoup impor ...

  4. 笔记5:QQ群聊天机器人

    之前经常在别人群里看到有自动回复消息的机器人. 功能有好多,可以玩各种游戏.觉得还蛮有意思的.. 于是就去请教别人怎么弄得,但是他们都说得好复杂,好高大上,无非就是不想让别人弄 本人是个不会轻易放弃的 ...

  5. case when 对某个字段值分类讨论

    SELECT SM_ID,SM_CID,SM_STATION,SM_TIME,PS_CODE,PS_NUMBER,SS_NAME,SS_CODE, ( THEN '中转站' END) FROM dbo ...

  6. override和overload的区别

    override(重写,覆盖) 1.方法名.参数.返回值相同. 2.子类方法不能缩小父类方法的访问权限. 3.子类方法不能抛出比父类方法更多的异常(但子类方法可以不抛出异常). 4.存在于父类和子类之 ...

  7. GPOR

    [tengzhenzhen15@lu01 gpor]$ for ((i=0; i<=19; i++)) do ./gpor -S 0.4 X4058_300_gpor/mytask_train. ...

  8. CI框架 数据库批量插入 insert_batch()

    使用CI框架的AR操作:insert_batch()可以减少访问数据库的次数.一次访问即可. 示例1: $data = array( array( 'title' => 'My title' , ...

  9. CI框架 输入类

    1.$this->input->post() 第一个参数是所要取得的post中的数据: $this->input->post('some_data'); 如果数据不存在,方法将 ...

  10. BZOJ4006 [JLOI2015]管道连接

    裸的状压DP 令$f_S$表示包含颜色集合S的最小斯坦纳生成森林的值,于是有: $$f_S=\min\{f_S,f_s+f_{S-s}|s\subset S\}$$ 然后嘛...还是裸的斯坦纳树搞搞. ...