无人眷顾我的年华,无人看到我的理想
只有你,在黑夜淌进我的心田。

页面返回顶部的功能代码

作者: 时间:2014-04-03 分类:学习折腾 评论:18 围观:49 次

闲来无事,为自己的网站增加了这个功能,只要你的网站先前有了jquery,把下面的代码插入网页底部即可,具体效果就是小猫博客的效果,图片自行更换

这个代码也可改造成类似周小姐博客那种滑动菜单..

20140403105015

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<script language="javascript" type="text/javascript">
var w3c = (document.getElementById) ? true : false;
var agt = navigator.userAgent.toLowerCase();
var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));
var mymovey = new Number();
function IeTrueBody(){
return (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
}
function GetScrollTop(){
return ie ? IeTrueBody().scrollTop : window.pageYOffset;
}
</script>
 
<div id=backi style="Z-INDEX:2; POSITION: absolute;  HEIGHT:auto">
    <style type="text/css">
  #backi{display:none;background:url(images/5-120601160009-50.png); cursor:pointer;}
     #backi a{ text-decoration:none; color:#ccc; line-height:25px;display:block;float:left;margin-left:5px; }
  #backi a:hover{ color:#f60; text-decoration:underline; }
    </style>
       <a  class="navtop" href="javascript:void(0)" title="返回顶部" rel="返回顶部" style=" width:48px; height:82px; "></a>
 
 </div>
 
<script language="JavaScript1.1">
    function heartBeat(){
     diffY=GetScrollTop(); 
  		var chen2=(window.screen.height)*0.7;
     mymovey += Math.floor((diffY-document.getElementById('backi').style.top.replace("px","")+chen2)*0.1);
     document.getElementById('backi').style.top = mymovey+"px";
	 var hideH=document.body.scrollTop; 
	 var hideH2=document.documentElement.scrollTop;
 
	 if((hideH>0)||(hideH2>0)){
		document.getElementById("backi").style.display= "block";
	 }else{
		document.getElementById("backi").style.display= "none";
	}
  }
 document.getElementById("backi").style.left= document.body.scrollWidth-150+"px";
  window.setInterval("heartBeat()",1);
$(document).ready(function() {
 
 
	$(".navtop").click(function(){
 
		$('html,body').animate({scrollTop:0},500);
 
		})
 
 
});
 
</script>

如果对你有益,欢迎使用以下快捷分享告诉你的朋友

0
本文为Clmao常乐猫所有,转载请注明链接:http://www.clmao.com/?p=774
在线手册:
站点地图
Clmao强力驱动