返回到上一页的html代码的几种写法

返回到上一页的html代码的几种写法,第1张

返回到上一页的html代码的几种写法

1.超链接返回上一页代码:

<a href=”#” onClick=”javascript :history.back(-1)”>返回上一页</a>

<a href=”#” onClick=”javascript :history.go(-1)”>返回上一页</a>

2.用按钮代码:

<input type=”button” name=”Submit” onclick=”javascript:history.back(-1)” value=”返回上一页”>

3.图片代码:

<a href=”javascript :” onClick=”javascript :history.back(-1)”><img src=”图片路径” border=”0″ title=”返回上一页”></a>

[color=#FF0000]几秒钟后[/color]自动返回上一页代码:(加入两个head间,3000表示3秒)

<SCRIPT language=javascript>

function go()

{

window.history.go(-1)

}

setTimeout(“go()”,3000)

</SCRIPT>

“>返回上一页</a>

<script>alert(‘发布失败’)location.href=’index.php’window.history.go(-1)

</script>

扩展资料:

跳转页面的html代码的几种写法

html的实现

<head>

<!-- 以下方式只是刷新不跳转到其他页面 -->

<meta http-equiv="refresh" content="10">

<!-- 以下方式定时转到其他页面 -->

<meta http-equiv="refresh" content="5url=hello.html">

</head>

2. javascript的实现

<script language="javascript" type="text/javascript">

// 以下方式直接跳转

window.location.href='hello.html'

// 以下方式定时跳转

setTimeout("javascript:location.href='hello.html'", 5000)

</script>

3.结合了倒数的javascript实现(IE)

<span id="totalSecond">5</span>

<script language="javascript" type="text/javascript">

var second = totalSecond.innerText

setInterval("redirect()", 1000)

function redirect(){

totalSecond.innerText=--second

if(second<0) location.href='hello.html'

}

</script>

参考资料:百度百科-html代码

网站的网页中都有返回顶部的功能,就是当用户访问网页时,可以迅速的返回顶部。也许会有人觉得这个功能很简单,没有什么说的,但据我目前所知,就有五种方法实现这个功能。而且不同的方法能实现的效果也是有所不同的。下面介绍下这些方法网页中“返回顶部”的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/htmlcharset=gb2312" />

<title>返回顶部</title>

<style type="text/css">

body{height:1000px}

</style>

</head>

<body>

<div style="height:800pxwidth: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/htmlcharset=gb2312" />

<title>返回顶部</title>

<style type="text/css">

body{height:1000px}

</style>

</head>

<body>

<div style="height:800pxwidth: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/htmlcharset=gb2312" />

<title>返回顶部</title>

</head>

<body>

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

<div style="height:300pxwidth:300px"></div>

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

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7270781.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存