<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. 14.5 富文本编辑【JavaScript高级程序设计第三版】

    富文本编辑,又称为WYSIWYG(What You See Is What You Get,所见即所得).在网页中编辑富文本内容,是人们对Web 应用程序最大的期待之一.虽然也没有规范,但在IE 最早 ...

  2. Laravel框架简单的用户管理[CURD]操作

    一个基于laravel和bootstrap的简单的用户管理,适合刚入门的我们,在做的过程中可以加深自己对laravel基础理解,里面存在一些问题,还未修改,比如css和js的引入,表单提交地址等不规范 ...

  3. APIO2016赛艇

    首先每个学校的边界范围是\(1e9\),肯定不能直接\(dp[i][j]\)表示前i所学校,第\(i\)所学校派出\(j\)艘船,但\(b<=500\)所有考虑把\(a,b\)离散,第二维改为当 ...

  4. Python入门基础之循环

    如果计算机不能循环,那么它比人还笨,实际上它也确实比人笨.你之所以觉得计算机好厉害,是因为它快,guangzhoushenbo.com计算机可以在1秒钟内重复做一件事情成千上万次. Python学习交 ...

  5. 【bzoj1507】 JSOI2008—Blue Mary的旅行

    http://www.lydsy.com/JudgeOnline/problem.php?id=1570 (题目链接) 题意 给出$m$个航班,每天只能做一次飞机,有$T$人从起点到终点,问最晚到达的 ...

  6. 使用“DiskGenius”精确隐藏硬盘坏道

    现在大家手中可能都有些有坏道的硬盘,也可能现在机器上的硬盘也出问题了.硬盘有坏道,肯定不会全部都是坏道,不能使用了.但我们因此而不能使用了,那么就太可惜了.所以,只要把有坏道的区域隐藏起来,就如同使用 ...

  7. idea中的language level 介绍

    language level 介绍 其他 IDE 没有看到类似 language level 的设置,所以这个功能应该算是 IntelliJ IDEA 特有的,可是 IntelliJ IDEA 官网也 ...

  8. Python pickle模块

    python的pickle模块实现了基本的数据序列和反序列化.通过pickle模块的序列化操作我们能够将程序中运行的对象信息保存到文件中去,永久存储:通过pickle模块的反序列化操作,我们能够从文件 ...

  9. cece

    cece ===================== 测试样式 =======================       循路觅宗师,形影不相离,师知吾亦知,吾乃.....成宗师? 网站导航 显示公 ...

  10. jmeter oracle 多机 jdbc url配置

    jmeter oracle 多机 jdbc url配置: jdbc:oracle:thin:@(DESCRIPTION=(ADDRESS_LIST=(ADDRESS=(PROTOCOL=TCP)(HO ...