群里看到“如何实现点击刷新页面并同时跳转到本页面指定位置”这么一个提问,于是抽空写了个demo,做了个简单实现,供大家参考。这里有2个要求:
1)要刷新页面
2)跳转到页面指定位置
如果我们简单用a标签name属性,锚点(anchor)来处理的话,只能实现跳转到页面指定位置,而不能刷新。因此,对上述提问,笔者换了下顺序,就比较容易实现了。
1)先跳转到页面指定位置;(用锚点实现即可)
2)再刷新页面;(location.reload(true)即可)
案例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Location-Anchor</title>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
.box{width: 990px; margin:0 auto 10px; min-height: 400px; border:1px solid #e2e2e2;}
.box .hd{height: 30px; line-height: 30px; font-size: 16px; background:#f5f5f5; padding: 0 15px;}
</style>
</head>
<body>
<div class="box" style='min-height:0;'>
<div class="hd">
<button type="button" onclick="goFloor(1)">Go Floor1</button>
<button type="button" onclick="goFloor(2)">Go Floor2</button>
<button type="button" onclick="goFloor(3)">Go Floor3</button>
<button type="button" onclick="goFloor(4)">Go Floor4</button>
<button type="button" onclick="goFloor(5)">Go Floor5</button>
</div>
</div>
<div class="box">
<div class="hd"><a name="floor1">Floor 1</a></div>
</div>
<div class="box">
<div class="hd"><a name="floor2">Floor 2</a></div>
</div>
<div class="box">
<div class="hd"><a name="floor3">Floor 3</a></div>
</div>
<div class="box">
<div class="hd"><a name="floor4">Floor 4</a></div>
</div>
<div class="box">
<div class="hd"><a name="floor5">Floor 5</a></div>
</div>
<script type="text/javascript">
function goFloor(floor) {
var url = location.href;
url = url.indexOf('#floor') > 0 ? url.replace(/\#floor(\d)/, '#floor' + floor) : url + '#floor' + floor;
location.href = url;
location.reload(true);
}
</script>
</body>
</html>
代码说明:
1)通过设置location.href = url(带#a[name])实现锚点跳转;
2)location.reload(true); 页面重新加载,实现刷新功能;
3)构建带锚点的url,使用了字符串正则替换;
页面是否刷新验证:
1)先跳转到floor3,此时url = …#floor3
2)修改html文件,把<a name=“floor1”>Floor 1</a>改成<a name=“floor1”>Floor 1 refreshed</a>,保存文件
3)点击go floor1按钮,看页面floor1标题是否改成了“Floor 1 refreshed”。