1.场景：进入页面上面是五个导航栏，内容部分是一段很长很长很长很长…的文字说明，点击某一个按钮精确定位到内容的小标题处
2.上代码html部分
<a-menu v-model="current" mode="horizontal">
<a-menu-item
class="fangkong shifted"
@click="toteg('prevention')"
key="prevention"
>疫情防控动态</a-menu-item>
<a-menu-item class="fangkong shifted" @click="toteg('qushi')" key="qushi">趋势分析</a-menu-item>
<a-menu-item class="fangkong shifted" @click="toteg('fenbu')" key="fenbu">病例人员分布</a-menu-item>
<a-menu-item class="fangkong shifted" @click="toteg('chuzhi')" key="chuzhi">异常人员处置</a-menu-item>
<a-menu-item class="fangkong shifted" @click="toteg('admap')" key="admap">疫情区域地图</a-menu-item>
</a-menu>
3.js部分
toteg(item) {
var id = "#" + item;
let idItem = document.getElementById(item);
let anchor = this.$el.querySelector(id); //计算传进来的id到顶部的距离
this.$nextTick(() => {
// console.log(anchor.offsetTop)
window.scrollTo(0, anchor.offsetTop - 130); //滚动距离因为导航栏固定定位130px的高度
});
},
4.小tips：入口文件加上这句会让滚动更加丝滑哟
#app{
scroll-behavior: smooth;
}
今天的文章js中scroll的用法_js中prompt的用法分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/50210.html
