用锚点anchor和location.reload 实现点击刷新页面并同时跳转到本页面指定位置

您所在的位置:网站首页 跳转到指定页面js 用锚点anchor和location.reload 实现点击刷新页面并同时跳转到本页面指定位置

用锚点anchor和location.reload 实现点击刷新页面并同时跳转到本页面指定位置

2023-10-04 09:33| 来源: 网络整理| 查看: 265

群里看到“如何实现点击刷新页面并同时跳转到本页面指定位置”这么一个提问,于是抽空写了个demo,做了个简单实现,供大家参考。这里有2个要求: 1)要刷新页面 2)跳转到页面指定位置 如果我们简单用a标签name属性,锚点(anchor)来处理的话,只能实现跳转到页面指定位置,而不能刷新。因此,对上述提问,笔者换了下顺序,就比较容易实现了。 1)先跳转到页面指定位置;(用锚点实现即可) 2)再刷新页面;(location.reload(true)即可)

案例代码:

Location-Anchor .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;} Go Floor1 Go Floor2 Go Floor3 Go Floor4 Go Floor5 Floor 1 Floor 2 Floor 3 Floor 4 Floor 5 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); }

代码说明: 1)通过设置location.href = url(带#a[name])实现锚点跳转; 2)location.reload(true); 页面重新加载,实现刷新功能; 3)构建带锚点的url,使用了字符串正则替换;

页面是否刷新验证: 1)先跳转到floor3,此时url = …#floor3 2)修改html文件,把Floor 1改成Floor 1 refreshed,保存文件 3)点击go floor1按钮,看页面floor1标题是否改成了“Floor 1 refreshed”。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3