HTML做的网页 如何使当前页面跳转到另一页面锚点处,在线等!!

html-css016

HTML做的网页 如何使当前页面跳转到另一页面锚点处,在线等!!,第1张

比如现在有t1.html和t2.html两个页面,t1页面中需要设置超链接跳转到t2页面中的锚点a1位置,则需要按如下步骤进行设置:

1、t1页面中设置超链接href属性。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>t1页面</title>

<style>

html,body{margin:0padding:0background-color:#ccc}

.anchor{display:blockpadding:5px 10pxbackground-color:#aaa}

</style>

</head>

<body>

<a href="./t2.html#a1" target="_blank" class="anchor">跳转到t2页面a1</a>

</body>

</html>

2、t2页面中设置锚点元素的ID为a1。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>t2页面</title>

<style>

html,body{margin:0padding:0background-color:#ccc}

.anchor{display:blockpadding:5px 10pxbackground-color:#aaa}

.placeholder{height:800pxpadding:5px}

</style>

</head>

<body>

<div class="placeholder">占位div1</div>

<a id="a1" href="#" class="anchor">锚点a1</a>

<div class="placeholder">占位div2</div>

</body>

</html>

3、浏览器中打开t1页面(以Chrome浏览器为例,其他浏览器操作一样)。

4、点击“跳转到t2页面a1”,Chrome浏览器会新开一个标签页打开t2页面,此时锚点a1在浏览器可视范围内并且位于页面的顶端。这样,外部锚点链接就设置成功了。

单独添加一个链接,实现跳转:

<input type="button" value="我是一个按钮"

onclick="javascrtpt:window.location.href='http://blog.sina.com.cn/mleavs'">

触发一个函数跳转:

<script>

function jump(){

window.location.href="http://blog.sina.com.cn/mleavs"

}

</script>

<input type="button" value="我是一个按钮" onclick=javascrtpt:jump()>

< a  href = "路径" >< input  type = "button" / > </ a >

在按钮外面扩一个a标签就好了。

设置锚点 

跳转到锚点 

当然这个是没有动画效果的,需要js css才能实现动画 。

搜索html的锚点连接。

1、在DW中实现效果:打开DW编辑器,在body中输入编辑按钮代码:如下

<button id="feedback" type="button" style="margin-right:30px">草稿</button>

2、给按钮加一个超链接,链接到另一个页面最简单的方法就是用a标签给包含进去;如下

3、效果实现页面:

点击后: