码迷,mamicode.com
首页 > 其他好文 > 详细

侧边栏广告和回到顶部

时间:2015-12-14 01:27:47      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:

1. 侧边栏广告

 1     window.onload = window.onresize = window.onscroll = function() {
 2         var oDiv = document.getElementById("div1");
 3 
 4         //页面滚动的距离
 5         var scrollTop =
 6             document.documentElement.scrollTop || document.body.scrollTop;
 7 
 8         //DIV顶部距离可见窗口顶部的距离
 9         var t = (document.documentElement.clientHeight - oDiv.offsetHeight) / 2;
10 
11         //设置广告的位置
12         oDiv.style.top = scrollTop + t + "px";
13     }

2. 回到顶部

 1     window.onload = function() {
 2         var oBtn = document.getElementById("btn1");
 3         var timer = null;
 4         var isSys = false;
 5 
 6         //如果是用户拖动了滚动条,则停止滑动
 7         window.onscroll = function() {
 8             if (!isSys) {
 9                 clearInterval(timer);
10             }
11             isSys = false;
12         };
13 
14         oBtn.onclick = function() {
15             timer = setInterval(function() {
16                 isSys = true;
17 
18                 //页面滚动的距离
19                 var scrollTop =
20                     document.documentElement.scrollTop || document.body.scrollTop;
21                 var iSpeed = Math.floor(-scrollTop / 8);
22 
23                 //如果到达顶部,则清除定时器
24                 if (scrollTop === 0) {
25                     clearInterval(timer);
26                 }
27 
28                 document.documentElement.scrollTop =
29                     document.body.scrollTop = scrollTop + iSpeed;
30             }, 30);
31         };
32     };

 

侧边栏广告和回到顶部

标签:

原文地址:http://www.cnblogs.com/huoteng/p/5043943.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!