您的位置：首页 > Web前端 > JavaScript

html/js定位到锚点(单页hash跳转)

2016-02-28 21:42 661 查看

请在这里查看示例 ☞ anchor示例

实现此效果，还有一种使用id的方法，参考：http://qianduanblog.com/post/jquery-plugin-2-jquery-hash-parse-url-hash-and-listen-hashchange.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<title>demo</title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<style>
* {
margin: 0; padding: 0;
}
a {
background: yellow;
}
</style>
</head>
<body>
<p>触发按钮时，请注意链接的变化</p>
<a name="a">锚点a</a>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<a name="b">锚点b</a>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<div>一段内容</div>
<a href="#a">a标签定位锚点</a>
<button class="div1">js定位锚点b(仅单次定位)</button>
<button class="div2">js定位锚点a(可多次定位)</button>
</body>
<script>
;$(function() {
$('.div1').on('click', function() {
window.location.hash="#b";
});
$('.div2').on('click', function() {
window.location.href="#a";
});
});
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航