Vue监听滚动实现锚点定位(双向)示例


Posted in Javascript onNovember 13, 2019

在项目需求中需要实现一个滚轴联动锚点的功能

效果图如下:

Vue监听滚动实现锚点定位(双向)示例

功能代码demo如下:

<template>
 <div class="container">
  <div class="wrapper">
   <div class="section" style="height:500px;width:100%" v-for="(item, index) in list" :key="index" :style="{'height':index==0?'1000px':'500px'}">
    <div style="width:100%;height:100%;font-size:30px;text-align:center;font-weight:bold;color:#fff;" :style="{'background':item.backgroundcolor}">{{item.name}}</div>
   </div>
  </div>
  <div id="nac" style="height:500px;"></div>
  <nav style="position:fixed;right:30px;top:300px;">
  <a class="nav1" v-for="(item, index) in navList" :key="index" @click="jump(index)" :class="index==0?'current':''">{{item}}</a>
  </nav>
 </div>
</template>
<script>
 export default {
  data(){
   return {
    scroll: '',
    list: [{
    name: "第一条",
    backgroundcolor: "#90B2A3"
    }, {
    name: "第二条",
    backgroundcolor: "#A593B2"
    }, {
    name: "第三条",
    backgroundcolor: "#A7B293"
    }, {
    name: "第四条",
    backgroundcolor: "#0F2798"
    }, {
    name: "第五条",
    backgroundcolor: "#0A464D"
    }],
    navList: [1, 2, 3, 4, 5]
   }
  },
  methods: {
   dataScroll: function () {
    this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
   },
   jump(index) {
    let jump = document.getElementsByClassName('section');
    // 获取需要滚动的距离
    let total = jump[index].offsetTop;
    // Chrome
    document.body.scrollTop = total;
    // Firefox
    document.documentElement.scrollTop = total;
    // Safari
    window.pageYOffset = total;
    // $('html, body').animate({
    // 'scrollTop': total
    // }, 400);
   },
   loadSroll: function () {
    var self = this;
    var $navs = $(".nav1");
    var sections = document.getElementsByClassName('section');
    for (var i = sections.length - 1; i >= 0; i--) {
     if (self.scroll >= sections[i].offsetTop - 100) {
      $navs.eq(i).addClass("current").siblings().removeClass("current")
      break;
     }
    }
   }
  },
  watch: {
   scroll: function () {
    this.loadSroll()
   }
  },
  mounted() {
   window.addEventListener('scroll', this.dataScroll);
  }
 }
</script>

<style>
 * {
 padding: 0;
 margin: 0;
 }
 .nav1 {
  display: block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: #eee;
  margin: 10px 0;
 }
 .current {
  color: #fff;
  background: red;
 }
</style>

以上这篇Vue监听滚动实现锚点定位(双向)示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
常用的jQuery前端技巧收集
Dec 24 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
JS简单表单验证功能完整示例
Jan 26 Javascript
vue项目中锚点定位替代方式
Nov 13 #Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 #Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 #jQuery
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 #Javascript
jquery获取input输入框中的值
Nov 13 #jQuery
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 #Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 #Javascript
You might like
ThinkPHP空模块和空操作详解
2014/06/30 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
Python删除空文件和空文件夹的方法
2015/07/14 Python
python unittest实现api自动化测试
2018/04/04 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
Python类型转换的魔术方法详解
2020/12/23 Python
品恩科技软件测试面试题
2014/10/26 面试题
设置器与访问器的定义以及各自特点
2016/01/08 面试题
售后服务承诺书范文
2014/03/26 职场文书
部门年终奖分配方案
2014/05/07 职场文书
法学院毕业生求职信
2014/06/25 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
html5调用摄像头实例代码
2021/06/28 HTML / CSS
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android