手工活接单在家做有正规网站吗,华为企业管理软件,工程公司招聘,闸北区网站建设网页设计目录 需求背景实现思路遇到的问题问题解决关于锚点链接其他问题 需求背景 页面左侧是一级、二级标题#xff0c;页面右侧是一级、二级标题对应的内容点击左侧标题#xff0c;锚点链接#xff0c;右侧内容跳转到左侧标题对应的内容区域 实现思路 通过 a 标签 id 的方法实现… 目录 需求背景实现思路遇到的问题问题解决关于锚点链接其他问题 需求背景 页面左侧是一级、二级标题页面右侧是一级、二级标题对应的内容点击左侧标题锚点链接右侧内容跳转到左侧标题对应的内容区域 实现思路 通过 a 标签 id 的方法实现锚点链接跳转左侧使用 a 标签来实现锚点链接a :href#${index 1}_${item.type || 其他}a右侧使用唯一 id 来定位内容区域位置span :id${index 1}_${item.type || 其他}{{ item.type || 其他 }}/span遇到的问题 左侧 a 标签点击后右侧内容区域跳转没有问题除了第一个 “1.正卷” 【问题】点击左侧红色框框住的 “1.正卷” 时此时页面地址已经拼接 #/1_正卷右侧内容区域不跳转到右侧红框目标区域奇奇怪怪 问题解决 不是因为在第一行锚点失效其他在第一行的锚点跳转是正常的。 使用原生js【解决】 document.querySelector(目标位置的id或者className).scrollIntoView({ behavior: smooth }), 【注意】 querySelector() 获取的元素 id 或 className 不能为数字如果时数字可以使用 getElementById() 或 getElementsByClassName() 替换 querySelector() 解决代码
// 判断是第一个一级标题时使用原生js的滚动将右侧目标内容展示
this.$nextTick(() {const dom document.getElementById(1_${data.type || 其他})dom dom.scrollIntoView({ behavior: smooth })
})关于锚点链接其他问题 a nameID名称/a 配合 p idID名称/p 可以实现锚点跳转我试了不行;锚点链接跳转时当前页面地址会自动拼接 #/XXX 这对于vue 项目 hash 模式 来说如果刷新页面页面将变空白因为刷新时将 #/XXX 作为一个路由去访问但是项目中不存在该路由如何解决侦听刷新事件刷新时将当前页面路由保存然后再使用 this.$router.replace(当前页面路由) 跳到该路由。
