页面顶部和底部切换功能，仿twitter效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>页面顶部和底部切换效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body{background:#1a3265 url(about:blank) no-repeat fixed;padding:0px;margin:0px;cursor:default;}
#fixedMenu{width:80px;height:66px;position:fixed;z-index:29;bottom:0;right:0;background:transparent url(//ku.shouce.ren/files/images/201601/56a3214c619fa.png) 0 0;}
</style>

<script type="text/javascript">
function $(t){return _.getElementById(t);}
/* 平滑跳转到锚点处理块 */
function intval(v){
	v = parseInt(v);
	return isNaN(v) ? 0 : v;
}
// 获取元素信息
function getPos(e){
	var l = 0;
	var t  = 0;
	var w = intval(e.style.width);
	var h = intval(e.style.height);
	var wb = e.offsetWidth;
	var hb = e.offsetHeight;
	while (e.offsetParent){
		l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);
		t += e.offsetTop  + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0);
		e = e.offsetParent;
	}
	l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);
	t  += e.offsetTop  + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0);
	return {x:l, y:t, w:w, h:h, wb:wb, hb:hb};
}
// 获取滚动条信息
function getScroll() {
	var t, l, w, h;
	if (document.documentElement && document.documentElement.scrollTop) {
		t = document.documentElement.scrollTop;
		l = document.documentElement.scrollLeft;
		w = document.documentElement.scrollWidth;
		h = document.documentElement.scrollHeight;
	} else if (document.body) {
		t = document.body.scrollTop;
		l = document.body.scrollLeft;
		w = document.body.scrollWidth;
		h = document.body.scrollHeight;
	}
	return { t: t, l: l, w: w, h: h };
}
function scroller(el, duration){
	if(typeof el != 'object') { el = document.getElementById(el); }
	if(!el) return;
	var z = this;
	z.el = el;
	z.p = getPos(el);
	z.s = getScroll();
	z.clear = function(){window.clearInterval(z.timer);z.timer=null};
	z.t=(new Date).getTime();
	z.step = function(){
		var t = (new Date).getTime();
		var p = (t - z.t) / duration;
		if (t >= duration + z.t) {
			z.clear();
			window.setTimeout(function(){z.scroll(z.p.y, z.p.x)},13);
		} else {
			st = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.y-z.s.t) + z.s.t;
			sl = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.x-z.s.l) + z.s.l;
			z.scroll(st, sl);
		}
	};
	z.scroll = function (t, l){window.scrollTo(l, t)};
	z.timer = window.setInterval(function(){z.step();},13);
}
var _ = document;
//绑定页面加载完成事件调用函数
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
	oldonload();
      }
      func();
    }
  }
}
addLoadEvent(function() {
	//静止按钮
	if(t=$('fixedMenu')){
		t.style.cursor = 'pointer';
		t.title = '本鸟只可远观不可亵玩焉...';
		x=2;
		t.onclick = function (){
			if (document.documentElement && document.documentElement.scrollTop) {
					st = document.documentElement.scrollTop;
				} else if (document.body) {
					st = document.body.scrollTop;
			}
			if(st<x){
				scroller('footer',800);
				}else{
				scroller('header',800);
			}
		}
		t.onmouseover = function (){
			this.style.backgroundPosition='0 -66px';
			}
		t.onmouseout = function (){
			this.style.backgroundPosition='0 0';
		}
	}
});
</script>
</head>
<body>
<div id="header" style="color:#ffffff;">这里是页面顶部</div>
<div id="content" style="height:2000px;"></div>
<div id="footer" style="color:#ffffff;">这里是页面底部</div>
<div id="fixedMenu"></div>
</body>
</html>

AخA
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>页面顶部和底部切换效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body{background:#1a3265 url(about:blank) no-repeat fixed;padding:0px;margin:0px;cursor:default;}
#fixedMenu{width:80px;height:66px;position:fixed;z-index:29;bottom:0;right:0;background:transparent url(//ku.shouce.ren/files/images/201601/56a3214c619fa.png) 0 0;}
</style>
<!--[if lte IE 9]>
<style type="text/css">
#fixedMenu{_position:absolute;_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);}
</style>
<![endif]-->
<script type="text/javascript">

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...​x
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

页面顶部和底部切换功能，仿twitter效果

分类

网站常用

描述

页面顶部和底部切换功能，仿twitter效果，一个小鸟，点击就会回到网页顶部，或回到底部。