!
也想出现在这里? 联系我们
广告位
当前位置:首页>开发>其他开发实例>解决html多页面跳转时锚点不生效的问题

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

今天帮助同学解决了这样一个问题,大概的业务逻辑是这样的:A页面是一个商品列表,B页面会随机显示A页面的一些商品,当点击B页面中的某个商品时,需要跳转到A页面,并且直接通过锚点定位到该商品的位置。

例如A页面的路径如下:/Home/Index,且有很多Id=data[i]的商品div

例如B页面的路径如下:/Home/About,且有一些A标签,用来跳转到A页面的锚点链接,例如<a href=”/Home/Index#data[i]”></a>

理论上按上述代码这样做是可以直接生效的,能实现通过B页面的a标签链接锚点直接跳转到A页面的指定锚点位置,但是在实际测试过程中发现这样并不行,锚点不生效,且无法跳转到相应页面位置。

经过测试得出以下结论:

例如使用/Home/Index#data2跳转到A页面,页面并不会进行锚点指向,但是当页面加载完成后,把链接中的#data2改为#data3就可以直接跳转到指定位置,锚点又生效了,通过这个测试我们可以大致得知,通过链接到达A页面后,在页面还未加载完成时锚点指向已经执行了,故无法定位到指定锚点。

具体解决思路及办法:

通过js中的setTimeout函数,来延迟锚点的执行,等待页面全部加载完毕后再定位到指定锚点,具体的JS代码如下:

给TA打赏
共{{data.count}}人
人已打赏
其他开发实例

Axure9.0最新下载和激活教程(含可用授权码)

2022-11-9 14:57:26

其他开发实例

C#读取QQwry.dat纯真IP数据库

2022-11-9 14:58:13

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 [email protected] 或点击右侧 私信:林沐阳 反馈,我们将尽快处理。
4 条回复 A文章作者 M管理员
  1. 新的开始

    富江有天使的脸孔,但其实她是个恶魔,不,恶魔也比她要好一点。

  2. 月到天心处

    隔岸无旧情,姑苏有钟声。

  3. 洛阳商贾

    隔着屏幕轻易产生感情的你,肯定很孤独吧。

  4. ㅤㅤㅤ

    有时候,真希望醒来现实不过是南柯一梦,一切回归虚无。

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索