<script type="text/javascript">
window.onload = function(){
var timer = null;
//用于判断是否是用户执行onsroll事件
var flag = true;
var oBtn = document.getElementById("btn1"); window.onscroll = function(){ //如果是用户执行onscroll事件 就清除定时器
if(!flag)
{ clearInterval(timer);
} flag = false; } oBtn.onclick = function(){ timer = setInterval(function(){
flag = true;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var speed = Math.floor(-scrollTop/6); document.documentElement.scrollTop= document.body.scrollTop = scrollTop + speed; if(scrollTop==0)
{
clearInterval(timer);
} },150); };
}
</script>

javascript 回到顶部的更多相关文章

  1. 纯javascript 回到 顶部 实例

    很多网站都会采用瀑布式的加载模式,像qq空间加载好友动态,为了用户体验更好,很多网站会加上回到顶部的连接,但大多数网站都是一下子就回到了顶部,当然,这样有这样的好处,但是我是个比较喜欢很炫的东西的人, ...

  2. javascript 回到顶部效果的实现

    demo.js window.onload=function() { var timer=null; var obtn=document.getElementById('btn'); var isTo ...

  3. javascript 回到顶部 动画效果

    上代码: <!DOCTYPE html> <html> <head> <meta content="测试demo" name=" ...

  4. jquery javascript 回到顶部功能

    今天搞了一个回到顶部的JS JQ功能 (function($){ $.fn.survey=function(options){ var defaults={width:"298", ...

  5. 用Javascript实现回到顶部效果

    用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...

  6. 【JQ+锚标记实现点击页面回到顶部】

    前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...

  7. 自写jquery网页回到顶部效果,渐隐图标,引用js文件就可以

    唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...

  8. 【JavaScript Demo】回到顶部功能实现

    随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...

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

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

随机推荐

  1. Linux基础学习(9)--文件系统管理

    第九章——文件系统管理 一.回顾分区和文件系统 1.分区类型: 2.分区表示方法: 3.文件系统: 二.文件系统常用命令 1.df命令.du命令.fsck命令和dump2fs命令: (1)文件系统查看 ...

  2. 装CentOS 系统

    一. 二. 三. 四. 五. 六. 七. 八. 九. 十. 十一. 十二. 十三. 十四. 十五. 十六. 十七. 十八. setup设置

  3. bram和dram的区别

    http://blog.csdn.net/jbb0523/article/details/6533760

  4. 如果filename的value有值 说明支持存储

    如果filename的value有值 说明支持存储

  5. BZOJ4445 SCOI2015小凸想跑步(半平面交)

    考虑怎样的点满足条件.设其为(xp,yp),则要满足(x0-xp,y0-yp)×(x1-xp,y1-yp)<=(xi-xp,yi-yp)×(xi+1-xp,yi+1-yp)对任意i成立.拆开式子 ...

  6. Luogu3804 【模板】后缀自动机(后缀自动机)

    建出parent树统计即可.开始memcpy处写的是sizeof(son[y]),然后就T掉了……还是少用这种东西吧. 同时也有SA做法.答案子串一定是名次数组中相邻两个串的lcp.单调栈统计其是几个 ...

  7. html页面出现&#65279,影响布局

    这个问题只会在chrome和edge浏览器出现.由于该HTML页面是由PHP解析模版生成的. UTF-8 + BOM编码方式一般会在windows操作系统中出现,比如WINDOWS自带的记事本等软件, ...

  8. bzoj1001/luogu4001 狼抓兔子 (最小割/平面图最小割转对偶图最短路)

    平面图转对偶图:先在原图中加一个s->t的边,然后对每个面建一个点,对每条分隔两个面的边加一条连接这两个面对应点的边,边权等于原边权. 然后从刚才加的s->t分割出来的两面对应的两个点跑最 ...

  9. CF401D Roman and Numbers

    题意: 将n(n<=10^18)的各位数字重新排列(不允许有前导零) 求 可以构造几个mod m等于0的数字 分析: 状态压缩 状态: 设f[s][k]表示对于选择数字组合的s来说,%m等于k的 ...

  10. C# 面向对象零碎知识点

    obgect: 所有数据类型都是obgect类型: 万能类型 var :原来的变量不变,替换成var: 动态类型 dynamic :类似object,遍历需要转: is  as: 类型转换运算符: ( ...