因为要实现这么一个锚点定位的效果,我就用了a标签的href属性和id属性来做
不过并不能达到想要的效果,跳转到其他页面去了,我弄了半天,觉得可能是和vue-router有关,看了下2.0的文档,看到里面有模拟滚动到锚点行为,但是不大懂那个具体怎么实现,麻烦有做过类似的朋友给解答下,或者有没有例子给参考下
因为要实现这么一个锚点定位的效果,我就用了a标签的href属性和id属性来做
不过并不能达到想要的效果,跳转到其他页面去了,我弄了半天,觉得可能是和vue-router有关,看了下2.0的文档,看到里面有模拟滚动到锚点行为,但是不大懂那个具体怎么实现,麻烦有做过类似的朋友给解答下,或者有没有例子给参考下
一个更简单的方法就是在你想要跳到的位置设置一个唯一id,
然后通过 document.querySelector("#你设置的位置").scrollIntoView(true);
语句就可以跳转到你设定的位置
博客
其中要获取当前页面的滚动条纵坐标位置,用:
document.documentElement.scrollTop;
而不是:
document.body.scrollTop;
documentElement 对应的是 html 标签,而 body 对应的是 body 标签
var anchor = this.$el.querySelector(selector)
document.body.scrollTop = anchor.offsetTop
判断offsettop是否大于视口的高度,超过就跳转过去
如果对动画和兼容性要求不高的话,推荐使用Element.scrollIntoView
这个API,我的文章中有介绍https://segmentfault.com/a/11...,不过介绍的不是很详细
5 回答7.2k 阅读✓ 已解决
5 回答8.2k 阅读
2 回答10.3k 阅读✓ 已解决
2 回答12.6k 阅读✓ 已解决
2 回答10.5k 阅读✓ 已解决
1 回答5.1k 阅读✓ 已解决
4 回答6.1k 阅读
可以透過
vue-router
裡面的scrollBehavior
實現html
部分就是按照你貼出來的圖栗子
如果沒辦法使用
History 模式
也沒關係,可以用其他方式:其實
vue-router
內部處理跳轉描點的方式是差不多的,只是這裡我們自己來實現。可以包裝成
mixin
或directive
來達到複用,這裡就不贅述了。栗子