网页中“返回顶部”的html代码怎么编写?

 我来答
明君1688
2017-05-22 · 计算人生、计算世界、计算未来
明君1688
采纳数:205 获赞数:851

向TA提问 私信TA
展开全部

网站的网页中都有返回顶部的功能,就是当用户访问网页时,可以迅速的返回顶部。也许会有人觉得这个功能很简单,没有什么说的,但据我目前所知,就有五种方法实现这个功能。而且不同的方法能实现的效果也是有所不同的。下面介绍下这些方法网页中“返回顶部”的html代码有好几种不同的编写方式:

1、简单的脚本可实现此功能:

代码:

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>返回顶部</title>

<style type="text/css">

body{height:1000px;}

</style>

</head>


<body>

<div style="height:800px; width:800px;"></div>

<a href="javascript:scroll(0,0)">返回顶部</a>

</body>

</html>

2、采用JS实现返回顶部:

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>返回顶部</title>

<style type="text/css">

body{height:1000px;}

</style>


</head>


<body>

<div style="height:800px; width:800px;"></div>

<script src="js/gototop.js"></script>

<div class="back-top-container" id="gotop">

<div class="yb_conct">

<div class="yb_bar">

<ul>

<li class="yb_top">返回顶部</li>

</ul>

</div>

</div>

</div>

</body>

</html>


3、利用锚点返回顶部:

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>返回顶部</title>


</head>


<body>


<a href="#5F">顶部</a> 

<div style="height:300px; width:300px;"></div>

<a name="5F">返回顶部</a>

</body>

</html>

hyt4399
2012-11-28 · TA获得超过5068个赞
知道大有可为答主
回答量:7985
采纳率:60%
帮助的人:6112万
展开全部
在任意位置加上

<a href="#">返回顶部</a>

都行
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
职业人和培训师
2019-03-06 · TA获得超过1399个赞
知道小有建树答主
回答量:428
采纳率:90%
帮助的人:108万
展开全部
<script language="javascript">
function myUrl(){
window.location.href=window.location.href;
}
</script>

<a href="javascript:myUrl();">回到顶部</a>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
洲如巴b
2012-11-29
知道答主
回答量:21
采纳率:0%
帮助的人:8万
展开全部
在网页上设置锚点
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2019-01-16
展开全部
JavaScript简单返回顶部代码实例lmlblog.com/402.html
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式