兼容性极好的“回到顶部”代码

最新推荐文章于 2021-11-24 19:52:53 发布

人参米

最新推荐文章于 2021-11-24 19:52:53 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：回到顶部

本文链接：https://blog.youkuaiyun.com/roc1029/article/details/15500263

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在网页加载完成后，使滚动条自动定位到页面底部，通过自定义JavaScript函数实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<script type="text/javascript"> 
//怎么获取网页的高度 让页面一出来就滚动条在最底端 
function myScroll() 
{ 
//前边是获取chrome等一般浏览器 如果获取不到就是ie了 就用ie的办法获取 
var x=document.body.scrollTop||document.documentElement.scrollTop; 
var timer=setInterval(function(){ 
x=x-100; 
if(x<100) 
{ 
x=0; 
window.scrollTo(x,x); 
	clearInterval(timer); 
} 
window.scrollTo(x,x); 
},"250"); 
} 
</script> 
<title>回到顶部</title> 
</head> 
	<body id="bd"> 
		<div> 
		<div style="height:1000px;">content</div> 
		<div style="height:1000px"> 
		<div style="position:fixed;right:50px;bottom:50px;width:60px;height:60px;background-color:red;cursor:hand;" 
			onclick="myScroll()">Return Top</div> 
		</div> 
	</body> 
</html>