// 回到顶部
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原生回到顶部效果的更多相关文章

  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. java 基础(第一天)

    1.  一个文件里面只能有一个 public 修饰的方法   且方法名与文件名保持一致. 如: public class main(){ } class car(){ } class dog(){ } ...

  2. js上下滚屏效果,代码通过测试

    这是html代码 <div class="box"> <div class="bcon"> <h1><b>领号实 ...

  3. Java位操作全面总结

    转载: Java位操作全面总结 在计算机中所有数据都是以二进制的形式储存的.位运算其实就是直接对在内存中的二进制数据进行操作,因此处理数据的速度非常快.在实际编程中,如果能巧妙运用位操作,完全可以达到 ...

  4. ma

    首页 第一项 上课 哈哈

  5. jQuery.outerWidth() 函数详解

    outerWidth()函数用于设置或返回当前匹配元素的外宽度. 外宽度默认包括元素的内边距(padding).边框(border),但不包括外边距(margin)部分的宽度.你也可以指定参数为tru ...

  6. css清除默认样式和设置公共样式

    /*公共样式--开始*/ html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textar ...

  7. Python安装BeautifulSoup库(Windows平台下)

    简介 参照官网Beautiful Soup4.4.0文档:https://www.crummy.com/software/BeautifulSoup/bs4/doc/ 安装步骤 1.到https:// ...

  8. Java GC系列(2):Java垃圾回收是如何工作的?

    本文由 ImportNew - 伍翀 翻译自 javapapers. 目录 垃圾回收介绍 垃圾回收是如何工作的? 垃圾回收的类别 垃圾回收监视和分析 本教程是为了理解基本的Java垃圾回收以及它是如何 ...

  9. windows下修改mysql用户名和密码

    1.关闭正在运行的MySQL. 2.打开DOS窗口,转到mysql\bin目录. 3.输入mysqld-nt --skip-grant-tables回车.如果没有出现提示信息,那就对了. 4.再开一个 ...

  10. 在进程View时的四个构造函数详解

    public View(Context context):源代码中的解释如下:在Code中实例化一个View就会调用第一个构造函数 /** * Simple constructor to use wh ...