解决html多页面跳转时锚点不生效的问题

今天帮助同学解决了这样一个问题,大概的业务逻辑是这样的: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代码如下:

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 241113@qq.com 我们将尽快处理。
技巧与优化

亲测可用的JS复制数据到剪切板实例

2022-11-30 13:31:25

技巧与优化

HTML5调用手机相机拍照上传实例

2022-12-1 9:09:51

搜索