返回顶部的JS代码

最新推荐文章于 2023-03-20 18:30:19 发布

转载最新推荐文章于 2023-03-20 18:30:19 发布 · 199 阅读

文章标签：

#div #javascript #scroll #border

JS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的网页底部悬浮返回顶部按钮的方法。该方法通过设置DIV元素的样式来实现按钮的位置固定，并使其始终显示在屏幕右下角。文章详细解释了如何根据浏览器的兼容性调整定位方式，并提供了完整的代码示例。

<script type="text/javascript"><!--
			var w = 90;
			var h = 100;
			var str = "";
			var obj = document.getElementById("divStayTopLeft");
			if (obj)str = obj.innerHTML;
			if( typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat'){
			document.writeln('<DIV  style="z-index:9;right:0;bottom:0;height:'+h+'px;width:'+w+'px;overflow:hidden;POSITION:fixed;_position:absolute; _margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop);">');
			}
			else {
			document.writeln('<DIV  style="z-index:9;right:0;bottom:0;height:'+h+'px;width:'+w+'px;overflow:hidden;POSITION:fixed;*position:absolute; *top:expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-this.style.pixelHeight);">');
			}
			document.writeln('<div style="clear:both;margin:auto;height:34px;font-size:17px;overflow:hidden;font-weight:bold;text-align:left;"><a href="javascript:scroll(0,0)" hidefocus="true"><img src="http://localhost/lixiaochen/CI/CodeIgniter/citest/pic/totop.jpg" alt="回到顶部" style="border: 0px;" /></a></div> ');
			document.write('<div style="clear:both;margin:auto;overflow:hidden;text-align:left;">'+str+'</div>');
			document.writeln('</DIV>');
			-->
			</script>