js实现，点击侧边导航栏，可以平缓的跳到界面指定位置，同时当界面某个元素在浏览器可视范围的时候，相应的导航栏也显示相应的样式

注：要下载安装好jquery和element-ui
"element-ui": "^2.15.8"
"jquery": "^3.6.0"
有时候在使用‘$’报错找不到，可以直接在组件内这样使用
import $ from 'jquery'
window.jQuery = $
window.$ = $

效果如下：

html代码：

<div><div class="navBox"><ul class="navigation"><li class="currentLi"><i class="el-icon-top" @click="goUp"></i></li><liv-for="(item,index) in navList":key="index"class="navLi"@mouseover="liSeover(item,index)"><span class="navListTitle">{{ item.title }}</span><span v-if="index===currentIndex" class="blacDian"></span><a :class="index===currentIndex?'currentClick':''" :href="item.name" :title="item.title"@click="changji(item.name,index)">{{ item.current }}</a></li><li class="currentLi"><i class="el-icon-bottom" @click="goDown"></i></li></ul>
</div><div id="xxx1" style="height: 600px;width: 100%;background-color: #95542E"><h1>xxx1</h1></div><div id="xxx2" style="height: 600px;width: 100%;background-color: red"><h1>xxx2</h1></div><div id="xxx3" style="height: 600px;width: 100%;background-color: rebeccapurple"><h1>xxx3</h1></div><div id="xxx4" style="height: 600px;width: 100%;background-color: royalblue"><h1>xxx4</h1></div><div id="xxx5" style="height: 600px;width: 100%;background-color: green"><h1>xxx5</h1></div><div id="xxx6" style="height: 600px;width: 100%;background-color: antiquewhite"><h1>xxx6</h1></div><div id="xxx7" style="height: 600px;width: 100%;background-color: #122B3F"><h1>xxx7</h1></div></div>

css代码:

.navListTitle {position: absolute;left: -60px;top: 0;font-size: 12px;display: none;
}.navLi:hover .navListTitle {display: block;
}.blacDian {display: inline-block;width: 5px;height: 5px;border-radius: 50%;background: #DC6821;position: absolute;top: 7px;left: 3px;
}.currentClick {color: #DC6821;
}.navBox {position: fixed;right: 30px;top: 25%;border: 1px solid;width: 50px;box-sizing: border-box;
}.navigation li {list-style-type: none;margin: 40px 0;position: relative;
}a {text-decoration: none;color: white;
}a:hover, .currentLi:hover {color: #DC6821;cursor: pointer;
}* {margin: 0;padding: 0;
}

js代码：

data () {return {currentIndex: 0,currentPoint: '',navList: [{name: '#xxx1', title: '第1个导航', current: '01'},{name: '#xxx2', title: '第2个导航', current: '02'},{name: '#xxx3', title: '第3个导航', current: '03'},{name: '#xxx4', title: '第4个导航', current: '04'},{name: '#xxx5', title: '第5个导航', current: '05'},{name: '#xxx6', title: '第6个导航', current: '06'},{name: '#xxx7', title: '第7个导航', current: '07'}]}},mounted () {$(window).on('scroll', () => {let el1 = document.getElementById('xxx1')let el2 = document.getElementById('xxx2')let el3 = document.getElementById('xxx3')let el4 = document.getElementById('xxx4')let el5 = document.getElementById('xxx5')let el6 = document.getElementById('xxx6')let el7 = document.getElementById('xxx7')let arr = [el1, el2, el3, el4, el5, el6, el7]arr.forEach((k) => {if (this.isInViewPort(k)) {console.log(k.id)let findIndex = '#' + k.idthis.navList.forEach((o, i) => {if (o.name === findIndex) {this.currentIndex = ithis.currentPoint = o.name}})}})})
}methods:{goUp () {this.navList.forEach((o,i)=>{if (o.name === this.currentPoint) {if (i===0) {this.$message({message: '当前已是第一个！',type: 'warning'});return}document.querySelector(this.navList[i-1].name).scrollIntoView({behavior: 'smooth'})}})},goDown() {this.navList.forEach((o,i)=>{if (o.name === this.currentPoint) {if (i === this.navList.length-1) {this.$message({message: '当前已是最后一个！',type: 'warning'});return}document.querySelector(this.navList[i+1].name).scrollIntoView({behavior: 'smooth'})}})},liSeover (item, index) {},changji (value, index) {this.currentIndex = index// eslint-disable-next-line no-undef// 綁定導航列每個 a 的點擊事件$('.navigation > li > a').click(function (e) {e.preventDefault() // 取消預設動作(直接跳轉到錨點)// 改由 jquery 的 animate 實現平滑移動到錨點$('html, body').animate({// 取得原先要移動至的元素，取得離上方距離，在 300ms 內完成捲軸動畫scrollTop: $($.attr(this, 'href')).offset().top}, 500)})},// 判断一个元素是否在可视区域中方法2isInViewPort (element) {const viewWidth = window.innerWidth || document.documentElement.clientWidth || ''const viewHeight = window.innerHeight || document.documentElement.clientHeight || ''const {top,right,bottom,left,} = element.getBoundingClientRect()return (top >= 0 &&left >= 0 &&right <= viewWidth &&bottom <= viewHeight)},// 判断一个元素是否在可视区域中方法1isInViewPortOfOne (el) {// viewPortHeight 兼容所有浏览器写法const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeightconst offsetTop = el.offsetTopconst scrollTop = document.documentElement.scrollTopconst top = offsetTop - scrollTopreturn top <= viewPortHeight}
}

说明：

1、document.querySelector(this.navList[i-1].name).scrollIntoView({behavior: 'smooth'})该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域，

2、changji（）方法将点击a标签，平缓的移动到href='id'绑定的id的位置，使用jquery中的animate来进行，所以确保自己项目安装了juqery

3、currentClick类样式来区别当前是那个导航栏或者当前那个元素在浏览器可视范围的样式，依赖index（当前点击的侧边导航栏或者当前在浏览器可视范围的元素来控制）

4、currentPoint属性很重要，它保存的是当前是那个元素在浏览器的可视范围，值为每个元素的id值，如：‘#xxx7’,导航栏最上面和最下面的两个箭头，就是依赖这个值来进行的

5、isInViewPort（）方法用来判断当前是哪个元素在浏览器的可视访问，执行它放回的是一个布尔值，然后再组件的生命周期函数mounted里面监听窗口滚动条的变化，当滚动条变化时，给每一个元素绑定isInViewPort（）方法，来识别当前是那个元素在浏览器可视范围来改变index的值，从而改变当前导航栏的样式，已到达我们目的

添加个额外知识

1：clientWidth和clientHeight: 可视部分的高度和宽度，content+padding,如果出现滚动条，会覆盖元素宽高，减去滚动条的宽高:

2：clientLeft和clientTop这个属性指的就是读取它本身这个元素border的宽度和高度
3：offsetWidth和offsetHeight: content+padding+border,与滚动条无关，最终滚动条会包裹在它们里面:4：offsetLeft和offsetTop两个比较抽象，就是偏移的意思，这个一般是它自己本事的偏移，如元素身上有margin,left,top，等，一般都是根据最近的定位元素的父级来定的偏移多少，通常与offsetParent属性结合做一些动画

js实现，点击侧边导航栏，可以平缓的跳到界面指定位置，同时当界面某个元素在浏览器可视范围的时候，相应的导航栏也显示相应的样式相关推荐

html导航栏页面切换的js,js实现页面滚动切换导航栏/点击导航栏跳转到指定位置...
最近一直在弄页面的事情,对页面方面的知识又巩固了一下.这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言! js部分 //标题对象 var title = document.getElemen ...
js实现页面滚动切换导航栏/点击导航栏跳转到指定位置
最近一直在弄页面的事情,对页面方面的知识又巩固了一下.这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言! js部分 //标题对象 var title = document.get ...
js 跳转到指定位置高德地图_【高德字符串JavaScript面试题】面试问题：高德地图Js … - 看准网...
申请JSAPI的开发者key 申请地址:http://lbs.amap.com/dev/key 引入高德地图JavaScript API文件: 创建地图容器在页面body里你想展示地图的地方创建一个 ...
php微信地图定位导航,微信小程序实现定位及到指定位置导航的示例代码
一:实现定位及到指定位置导航所需组件及API 1:组件:map(地图组件) 2:API:wx.getLocation(Object object)(获取当前的地理位置.速度),wx.openLocat ...
js 跳转到指定位置高德地图_在H5页面内通过地址调起高德地图实现导航
项目中用到的一个功能是要通过点击地址来实现打开地图app实现地址导航. 如下图: 实现思路就是在H5页面内通过点击marker图标然后进行当前位置与页面上地址的路程规划与导航. 由于项目中用到的是高德 ...
js 跳转到指定位置高德地图_JS控制div跳转到指定的位置的几种解决方案总结
总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: div1 div2 ...
js 跳转到指定位置高德地图_JS引入高德地图定位
在此记录一下X项目使用高德地图的思路高德地图(X项目前端框架是Jquery) 2准备工作(封装方法,以便直接调用) -2.2封装超时方法($.timeOut-参考) -2.3封装异步调用地图的方法 / ...
word生成pdf点击目录可自动跳转到指定位置
word 点击引用点击目录下拉箭头,选择自动目录的那个目录样式. 生成目录之后,点击特色应用.点击输出为pdf. 生成之后再点击目录就可以自动跳转了.
js 跳转到指定位置高德地图_第三方高德地图Javascript API
1. 申请JSAPI的开发者Key : http://lbs.amap.com/dev/key 2. 引入高德地图JSAPI文件: AMap.Scale // 地图的比例因子 / ...

js实现，点击侧边导航栏，可以平缓的跳到界面指定位置，同时当界面某个元素在浏览器可视范围的时候，相应的导航栏也显示相应的样式

js实现，点击侧边导航栏，可以平缓的跳到界面指定位置，同时当界面某个元素在浏览器可视范围的时候，相应的导航栏也显示相应的样式相关推荐

最新文章

热门文章