Vue 使用原生 js 实现锚点定位到指定位置
通过href定位会在访问地址栏中增加ID值,影响url正常请求,不太友好;另外是href定位如果不想定位到浏览器界面顶部位置时, 需要在对应的ID值内部元素中增加外间距,如果需要多个同样定位元素展示,就会导致间距过大页面太难看了。网上有很多通过href锚点定位的方式,也有很多千奇百怪的方法!这种方式就可以解决多个同界面的不用元素锚点定位,只需要两步操作非常简单,网上的方式有些都是乱用方法。来源:h
·
来源:https://www.yoodb.com/notes/1001.html
方式一:传统href锚点定位
网上有很多通过href锚点定位的方式,也有很多千奇百怪的方法!这种跳转方法实现的是从某个位置跳转到同页面的另一个位置。
通过href定位会在访问地址栏中增加ID值,影响url正常请求,不太友好; 另外是href定位如果不想定位到浏览器界面顶部位置时, 需要在对应的ID值内部元素中增加外间距,如果需要多个同样定位元素展示,就会导致间距过大页面太难看了。
类似如下图效果,就不太实用:
#方式二:原生js指定位置定位
这种方式就可以解决多个同界面的不用元素锚点定位,只需要两步操作非常简单,网上的方式有些都是乱用方法。
侧边栏锚点定位不同元素位置,vue界面
export default {
methods: {
goMarginTop(value){
let offsetTop = document.getElementById(value).offsetTop - 20;
window.scrollTo(0,offsetTop);
}
},
};
更多推荐
已为社区贡献21条内容
所有评论(0)