2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > Vue 使用原生 js 实现锚点定位到指定位置

Vue 使用原生 js 实现锚点定位到指定位置

时间:2023-09-02 03:51:17

相关推荐

Vue 使用原生 js 实现锚点定位到指定位置

来源:/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);

}

},

};

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。