今天帮助同学解决了这样一个问题,大概的业务逻辑是这样的:A页面是一个商品列表,B页面会随机显示A页面的一些商品,当点击B页面中的某个商品时,需要跳转到A页面,并且直接通过锚点定位到该商品的位置。
例如A页面的路径如下:/Home/Index,且有很多Id=data[i]的商品div
例如B页面的路径如下:/Home/About,且有一些A标签,用来跳转到A页面的锚点链接,例如<a href=”https://www.s9h.cn/Home/Index#data[i]”></a>
理论上按上述代码这样做是可以直接生效的,能实现通过B页面的a标签链接锚点直接跳转到A页面的指定锚点位置,但是在实际测试过程中发现这样并不行,锚点不生效,且无法跳转到相应页面位置。
经过测试得出以下结论:
例如使用/Home/Index#data2跳转到A页面,页面并不会进行锚点指向,但是当页面加载完成后,把链接中的#data2改为#data3就可以直接跳转到指定位置,锚点又生效了,通过这个测试我们可以大致得知,通过链接到达A页面后,在页面还未加载完成时锚点指向已经执行了,故无法定位到指定锚点。
具体解决思路及办法:
通过js中的setTimeout函数,来延迟锚点的执行,等待页面全部加载完毕后再定位到指定锚点,具体的JS代码如下: