web前端学习记录

//返回顶部功能代码
<a href="javascript:;" id="btn"></a>

<script type="text/javascript">
	//页面加载后执行
	window.onload = function(){
		totop.style.display = "none";//每次刷新网页都先让返回顶部按键隐藏
		var timer;
		var totop = document.getElementById("btn");
		totop.onclick = function(){
			timer = setInterval(function(){
				var backtop = document.documentElement.scrollTop || document.body.scrollTop//两种获取滚动条的方式
				var speedTop = backtop/5;
				document.documentElement.scrollTop = backtop - speedtop;
				if(backtop == 0)
				{
					cleatInterval(timer);
				}
			},30);
		};
		//设置临界值，当滚动条距离顶部大于该值时,出现返回顶部按钮
		var pageHeight = 700;
		//按键是否显示功能
		window.onscroll = function(){
			var backtop = document.documentElement.scrollTop || document.body.scrollTop;
			if(backtop > pageHeight)
			{
				totop.style.display = "block";
			}else
			{
				totop.style.display = "none";
			}
		}
	}
</script>

//吸顶条功能代码
window.onload = function(){
	var nav = document.getElementById("nav");
	var navtop = nav.offsetTop;//距离顶部距离
	
	window.onscroll = function(){
		var backtop = document.documentElement.scrollTop || document.body.scrollTop;
		if(backtop > navtop)
		{
			nav.style.position = "fixed";
			nav.style.top = "0";
			nav.style.left = "0";
			nav.style.zIndex = "100";
		}else{
			nav.style.position = "";
		}
	}
}