侧边栏广告和回到顶部
2015-12-14 00:03
495 查看
1. 侧边栏广告
2. 回到顶部
window.onload = window.onresize = window.onscroll = function() { var oDiv = document.getElementById("div1"); //页面滚动的距离 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //DIV顶部距离可见窗口顶部的距离 var t = (document.documentElement.clientHeight - oDiv.offsetHeight) / 2; //设置广告的位置 oDiv.style.top = scrollTop + t + "px"; }
2. 回到顶部
window.onload = function() { var oBtn = document.getElementById("btn1"); var timer = null; var isSys = false; //如果是用户拖动了滚动条,则停止滑动 window.onscroll = function() { if (!isSys) { clearInterval(timer); } isSys = false; }; oBtn.onclick = function() { timer = setInterval(function() { isSys = true; //页面滚动的距离 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var iSpeed = Math.floor(-scrollTop / 8); //如果到达顶部,则清除定时器 if (scrollTop === 0) { clearInterval(timer); } document.documentElement.scrollTop = document.body.scrollTop = scrollTop + iSpeed; }, 30); }; };
相关文章推荐
- HTML5实现3D和2D可视化QuadTree四叉树碰撞检测
- 使用datepicker插件实现日期选择的基本操作 8-5
- 使用accordion插件实现页面中多区域的折叠操作8-4
- android Menu 选项菜单示例
- oracle处于资源正忙,或者session处于死循环的解决方法
- 09面向对象高级特性二
- native2ascii 的简单使用
- ora-02292,ora-02266主键约束问题
- oracle笔记:where 子句,连接,事务,体系概述的小知识点
- html 缓存控制
- ActionBar的移除与显示
- jeecg代码生成下载后导入到eclipse不能用的解决
- jsp写的简单购书网站
- 使用droppable插件实现对象的放置操作 8-2
- null 的比较 报错
- window.open打开一个窗口最大化
- 删除记录时的提示效果4-13
- JavaScript 变量
- 网页选项卡应用4-12
- jsp 学习