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

2020-01-27 13:44:13

字体：大中小

来源：转载

供稿：网友

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

<!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(/jscss/demoimg/201101/twitter.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>

上一篇：动画回到网页顶部，使用了jQuery 1.4