vue錨點

 

第一種：

router.js中添加

mode: 'history', srcollBehavior(to,from,savedPosition){ if(to.hash){ return { selector:to.hash } } } 

組件：

<template> <div> <ul class="list"> <li><a href="#1" rel="external nofollow" >星期1</a></li> <li><a href="#2" rel="external nofollow" >星期2</a></li> <li><a href="#3" rel="external nofollow" >星期3</a></li> <li><a href="#4" rel="external nofollow" >星期4</a></li> <li><a href="#5" rel="external nofollow" >星期5</a></li> <li><a href="#6" rel="external nofollow" >星期6</a></li> <li><a href="#7" rel="external nofollow" >星期7</a></li> </ul> <div class="main_con" id="1">11111111111111111111111111111111</div> <div class="main_con" id="2">22222222222222222222222222222222222</div> <div class="main_con" id="3">33333333333333333333333333333333333333</div> <div class="main_con" id="4">444444444444444444444444444444444444444</div> <div class="main_con" id="5">555555555555555555555555555555555555555</div> <div class="main_con" id="6">666666666666666666666666666666666666666</div> <div class="main_con" id="7">7777777777777777777777777777777777777777</div> </div> </template> <script> export default { data(){ return { } } } </script> <style> .list{ width: 100%; height: 50px; } li{ width: 11%; height: 50px; line-height: 50px; text-align: center; border: 1px solid #ccc; color: #ff6c00; float: left; list-style: none!important; } .main_con{ width: 100%; height: 200px; border: 1px solid #ccc; line-height: 200px; text-align: center; color: blue; } </style> //前端全棧學習交流圈：866109386 //面向1-3經驗年前端開發人員 //幫助突破技術瓶頸，提升思維能力 

第二種：

寫一個方法 組件

<template> <div> <div><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" @click="goAnchor('#anchor-'+index)" v-for="index in 20"> {{index}} </a></div> <div :id="'anchor-'+index" class="item" v-for="index in 20">{{index}}</div> </div> </template> <script> export default{ data(){ return { } }, methods: { goAnchor(selector) { var anchor = this.$el.querySelector(selector) document.documentElement.scrollTop = anchor.offsetTop } } } </script> <style> .item{ width: 100%; height: 200px; line-height: 200px; text-align: center; } </style> //前端全棧學習交流圈：866109386 //面向1-3經驗年前端開發人員 //幫助突破技術瓶頸，提升思維能力 

第三種： 自定義指令

<template> <div> <div><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" v-anchor="index" v-for="index in 20"> {{index}} </a></div> <div :id="'anchor-'+index" class="item" v-for="index in 20" >{{index}}</div> </div> </template> <script> export default{ data(){ return { } } } </script> <style> .item{ width: 100%; height: 200px; line-height: 200px; text-align: center; } </style> 

main.js 定義全局指令 方便其他地方復用

Vue.directive('anchor',{ inserted : function(el,binding){ el.onclick = function(){ document.documentElement.scrollTop = $('#anchor-'+binding.value).offset().top } } })

如果路由有問題

 

就用方法

<div style="position:fixed;top:10%;right:13%;">
            <div style="margin-bottom:15px"><a @click.prevent="custormAnchor('info1')" rel="external nofollow" class="topFloat">1</a></div>
            <div style="margin-bottom:15px"><a @click.prevent="custormAnchor('info2')" rel="external nofollow" class="topFloat">2</a></div>
            <div style="margin-bottom:15px"><a @click.prevent="custormAnchor('info3')" rel="external nofollow" class="topFloat">3</a></div>
            <div style="margin-bottom:15px"><a @click.prevent="custormAnchor('info4')" rel="external nofollow" class="topFloat">4</a></div>
        </div>

全局minx定義方法

custormAnchor(anchorName) {
            // 找到錨點
            let anchorElement = document.getElementById(anchorName);
            // 如果對應id的錨點存在，就跳轉到錨點
            if(anchorElement) { 
                anchorElement.scrollIntoView()
            }
        },