第七十四：前端实现点击页面某个菜单跳转到对应的锚点功能

已于 2024-08-19 11:30:26 修改
阅读量138 收藏
点赞数 2
文章标签： 前端 javascript 开发语言
于 2024-08-19 11:28:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maliyao4233/article/details/141320815
版权

1.用js来实现

scrollIntoView方法

先定义个id或者class随意，因为我是循环好几个小模块所以用动态的来实现
在这里插入图片描述

点击的时候传对应的类名进行滑动

在这里插入图片描述
document.getElementById(item.variableCode).scrollIntoView({behavior:“smooth”});

加上behavior:“smooth” 进行平滑滚动
在这里插入图片描述

路遥开着敞篷在兜风
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目--导航栏固定：实现页面滑动到相应位置导航栏有相应选中效果；点击导航栏跳转到对应位置；
m0_73347282的博客
11-18 999
【代码】导航栏固定-实现页面滑动到相应位置导航栏有相应选中效果-点击导航栏跳转到对应位置。
vue实现一个类似浏览器搜索功能(ctrl + f)
lyhqgh的博客
05-17 5392
vue实现一个类似浏览器搜索功能【ctrl + f】 一、介绍自己项目的需求二、先说说我的数据怎么设置的三、具体功能的实现思路和代码：1、点击左侧目录跳转到对应位置2、滚动到相应位置左侧目录树的对应标题变蓝色3、搜索功能4、目录展开和收起5、结语 一、介绍自己项目的需求 首先这个项目是一个静态的用户手册，左侧是目录树，右侧就是对应的内容区域。 因此接下来的需求就一目了然了： 点击左侧目录跳转到对应位置； 滚动右侧内容到达左侧目录的对应位置左侧目录相对应的会变成蓝色； 添加搜索功能 (1)监听输入框输入，
2024前端面试题总汇（持续更新中...）
Monsters___的博客
09-26 2万+
前端面试八股文大全！！！！！
前端面试题
weixin_51072087的博客
03-21 615
当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。使用插槽是在存在父子关系的组件中使用，我们可以在子组件中决定插槽的位置，同时子组件也可以给这些插槽的默认信息，当父组件中没有需要给子组件插槽插入信息时，显示的是子组件插槽定义的默认信息。这就是传说中的MVVM。
前端300道常见面试题，前端找工作必备
weixin_43474701的博客
12-15 1万+
前端面试题汇总 一、HTML 和 CSS 1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? IE: trident 内核Firefox：gecko 内核Safari:webkit 内核 Opera:以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发) 2、每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 声明位
前端学习（复习）
qq_72343101的博客
10-19 2376
前端学习
web前端学习1-45集
weixin_74304806的博客
10-20 3239
千峰web前端1-20集==第一集== 课程划分1.HTML+CSS系列教程1之拨云见日2.HTML+CSS系列教程2之溯本求源3.HTML+CSS系列教程3之风声水起4.HTML+CSS系列教程4之巧夺天工如何学好web前端==第二集== 拨云见日1. 什么是HTML、CSS：2. 代码跟网站的关系：3.写到哪里：4.怎样创建一个.html文件：作业==第三集== 宇宙第一编译器VS Code1.学习编辑器基本使用：（操作方面）练习==第四集== 续上集2.多光标操作：3.搜索图标：4.Chrome浏
前端基础知识点-每天一个基本知识点（100+个前端小知识，你是否都知道？）
weixin_44181180的博客
02-21 2万+
文章目录前言第一回合一、知识点：cookie（21/09/06）二、知识点：节流和防抖（21/09/07）三、知识点：var和let以及const（21/09/08）四：知识点：深拷贝和浅拷贝（21/09/09）五、知识点：作用域和作用域联（21/09/10）六、知识点：从输入URL到页面展示这中间发生了什么（21/09/11）七、知识点：重排（21/09/12）八、知识点：TCP和UDP（21/09/13）九、知识点：三次握手（21/09/15）十、知识点：绝对和相对定位（21/09/16）十一、知识..
【面试题系列|前端面试题】前端高频面试题总结（2021年最新版）
热门推荐
孙叫兽的博客
12-23 3万+
面试过不少前端从业者，简历写的平平淡淡，别人会的技能他也都会，看起来什么都掌握一些；有些会请过来当面聊一下，有些就直接拒绝了（如果是公司内要求独立完成项目的岗位，简历里放很多学习时候的DEMO项目，没有真实上线的项目，这种简历一般都会拒绝掉）。 当我们去一家公司面试，面试官有很大的主动权，面试官属于攻击方，求职者属于防守方，我们不可能什么方向都研究的非常深，所以扬长避短是最好的方式，推荐大家要做帐篷型的人，而不是水桶型的人；市场上岗位非常多，我们需要做的就是找到适合自己长处发展的那个职业！ 面试的时候一
JS如何实现在页面上快速定位（锚点跳转问题）
10-19
锚点，也被称作片段标识符，其作用是允许用户点击链接后页面能够跳转到特定的位置。在网页设计中，尤其是在内容较多、页面较长的情况下，合理使用锚点可以提高用户体验，让用户快速定位到感兴趣的内容区域。 锚点...
微信小程序 外卖：实现类似锚点功能 (源码)
05-31
微信小程序 外卖：实现类似锚点功能 (源码)微信小程序 外卖：实现类似锚点功能 (源码)微信小程序 外卖：实现类似锚点功能 (源码)微信小程序 外卖：实现类似锚点功能 (源码)微信小程序 外卖：实现类似锚点功能 (源码)...
线程导航＋锚点跳转，点击锚点跳转到对应位置
07-10
在网页开发中，"线程导航＋锚点跳转"是一种常见的交互设计，它结合了JavaScript（js）技术，使得用户可以通过点击特定的链接（锚点）快速定位到页面的指定部分。这种功能极大地提升了用户体验，特别是在内容丰富的长...
小程序源码 外卖：实现类似锚点功能 (代码源)
06-22
小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点...
小程序源码 外卖：实现类似锚点功能 (代码+截图)
06-19
小程序源码 外卖：实现类似锚点功能 (代码+截图)小程序源码 外卖：实现类似锚点功能 (代码+截图)小程序源码 外卖：实现类似锚点功能 (代码+截图)小程序源码 外卖：实现类似锚点功能 (代码+截图)小程序源码 外卖：...
【js】各类前端输入校验方法
galaxyJING的博客
08-21 353
【代码】【js】各类前端输入校验方法。
浅谈JavaScript 框架在现代 Web 开发中的作用
08-21 520
随着近年来 Web 开发的快速发展，JavaScript 框架已成为用于构建任何应用程序的强大、灵活和可扩展元素的重要实用程序。一些框架，如Angular、React、Vue.JS等，有助于以系统的方式处理固有的网站开发复杂性，以提高效率。它们提供已经为基本编程功能和常规任务编写的 JavaScript 代码，从而缩短了必要的原始编码时间。此外，它们还增加了 Web 应用程序的功能和交互性，从...
【IC前端虚拟项目】用例的完善与补充
moon9999的博客
08-20 95
当然只不过是参考，个人不建议在寄存器测试这个环节投入太多的经历，也没有必要非在环境中讲寄存器模型以seq方式呈现，只要用起来方便就是最合适的。如果之后在实际的项目中寄存器模型时通过seq的方式集成到环境中的（比如我现在负责的项目，验证环境就是如此），那么转换过来也是没有什么难度的，这点大可放心。此外，在组织更多随机用例的过程中可以练习多种不同约束的transaction以不同的比例关系通过同一个seq/sqr uvm_do的操作。好了，具体的用例大家可以参考我的代码，尽量以自己的思路来进行扩充。
前端宝典十六：深入浅出8大设计模式
最新发布
franktaoge的博客
08-24 662
本文主要探讨前端开发中的各种设计模式，主要分类有： - 单例模式 - 建造者模式 - 代理模式 - 装饰器模式 - 适配器模式 - 策略模式 - 观察者模式 - 发布订阅模式 通过对他们实际开发中的使用场景的解析，深入浅出的一起更全面直观的进行学习：
超链接应用详解：页面跳转、锚点与功能链接
2. **锚链接**：锚链接利用`<a>`标签的`href`属性结合`#`标识符，可以实现页面内的跳转，例如`跳转到章节1</a>`，使得用户无需滚动即可快速定位到页面的特定部分。 3. **功能性链接**：这类链接通常与JavaScript或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值