详解某视频剪辑软件项目中实现锚点定位

背景

今天在开发限时练-提分加项目的时候，有一个需要锚点定位的需求，而在某视频剪辑软件项目中，使用传统的在a标签的超链接属性中写编号的方法无效，会导致浏览器的地址改变从而跳转到其他页面。

解决

最终参考vue2.0中怎么做锚点定位改问题下的回答实现了效果。

模板div class=' score-preview-container ' div class=' content-box ' div class=' content-page-box '全局分析： id=' # anchor-0 '/错误合并： id=' # anchor-1 '/dopractice : id=' # anchor-2 '/div class=' nav-button-fix ' div class=' nav-button ' v-for='(项目，索引)在buttonArr' :key中从""导入全局分析/组件/全局分析。vue '；导入错误从""合并.组件/错误合并。vue '；从""导入Dojo point ./components/DoJourNal。vue '；导出默认{ name: '分数-预览'，组件： { GlobalAnalysis，ErrorMerge，DOP activity }，数据(){ return { buttonArr: ['整体分析', '错题整理', '提分训练]，活动BTN : { 0 }；}，挂载(){ this。DataInit()；}，methods: {.mapActions('v2-score-preview '，[' fetchclassscorcedata '，' fetchPersonalReportData '，' fetchErrorQuestionData '，' fetchexcesedata '])，//初始化dataInit(){ this。fetchclasscordata()；这个。fetch personalreportdata()；这个。fetcherrorquestdata()；这个。fetchexycedata()；}, //锚点跳转goAnchor(选择器，索引){ this.activeBtn=indexdocument。queryselector(' # app-root ').scrollTop=这个$el.querySelector(选择器)。offsetTop } } }/script另外，参考页面内锚点定位及跳转方法总结文章中的第四种方法，发现使用scrollIntoView()方法也能实现锚点定位的效果。

//锚点跳转goAnchor(选择器，索引){ this.activeBtn=index这个$el.querySelector(选择器)。scrollIntoView()}以上所述是小编给大家介绍的某视频剪辑软件项目中实现锚点定位详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！