HTML刷新页面锚点定位问题

HTML刷新页面锚点定位问题

参考贴
https://developer.mozilla.org/zh-CN/docs/Web/API/Performance
https://blog.csdn.net/zhouziyu2011/article/details/70673123

如果在a标签的href属性中配置了对应的锚点,那么在刷新当前页面的时候,页面会重新定位到锚点所在的位置

如果要解决此问题,说白就是要,刷新的时候页面回到顶部,并且,清除地址栏的锚点定位

需要用到,window.performance属性

比如地址栏结尾

index.html#product

刷新页面,页面还是定位到product的位置,而且地址栏并没有还原成index.html的状态

先说明

performance.navigation.type

返回一个整数值,表示网页的加载来源,可能有以下4种:

① 0:网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载,相当于常数performance.navigation.TYPE_NAVIGATENEXT。

② 1:网页通过重新加载按钮或location.reload()方法加载,相当于常数performance.navigation.TYPE_RELOAD。

③ 2:网页通过前进或后退按钮加载,相当于常数performance.navigation.TYPE_BACK_FORWARD。

④ 255:任何其他来源的加载,相当于常数performance.navigation.TYPE_UNDEFINED。

就目前情况来判断,只考虑type值是否为1的情况,因为是当前页面的刷新情况

    if (window.performance.navigation.type == 1) {
        var thisURL = document.URL;
        if (thisURL.split('#')[1]) {
            var url = thisURL.split('#')[0]
            window.location.replace(url)
        }
    } else {
        // return
    }
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页