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

news2024/9/21 14:52:39

1.用js来实现

scrollIntoView方法

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2054719.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

为Linux/centos虚拟机已有硬盘扩容

为Linux已有硬盘扩容 旧盘扩容的大体流程与关键命令: 为虚拟机磁盘加容量; 为磁盘新容量分区(fdisk); 将分区信息写入内核(partx); 为分区创建物理卷(pvcreate&#xff0…

电脑如何录屏?三款电脑录屏工具分享

电脑如何录屏?作为一个经常需要录制电脑屏幕大职场人,不是为了制作教程、记录会议,就是偶尔想自己做个游戏解说视频。市面上的录屏软件琳琅满目,经过一番尝试和比较,我选出了三款我个人认为表现不错的软件,…

Qt qss以及对话框

字体对话框的实现 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }void Widget::on_fontbtn_clicked() {bool ok;QFont ret…

开源的向量数据库Milvus

Milvus是一款开源的向量数据库,专为处理向量搜索任务而设计,尤其擅长处理大规模向量数据的相似度检索。 官网地址:https://milvus.io/ 以下是关于Milvus的详细介绍: 一、基本概念 向量数据库:Milvus是一款云原生向量…

pyinstaller打包vnpy项目

因为我写的软件主要是自己用,很少有打包的习惯,直接源代码部署,导致打包,以下记录一下给一个朋友做的,对vnpy的改写,实现实时读取信号文件,发现文件中信号改变就做出相应的交易动作,…

离线安装 MySQL 数据库系统并实现远程登录

MySQL 5.7.25 的安装包,存放在 /opt/software 目录下 详细步骤 一、离线安装 MySQL 数据库系统1. 解压安装包2. 安装 MySQL 组件3. 登录 MySQL(1)初始化 MySQL 的数据库(2)启动 MySQL 服务(3)登…

书生大模型学习笔记9 - LMDeploy 量化部署

LMDeploy 量化部署 InternLM 2.5 20b量化前部署W4A16 模型量化量化模型部署streamlit web InternLM 2.5 20b量化前部署 lmdeploy serve api_server \/root/learning/InternLM/XTuner/merged_20b \--model-format hf \--quant-policy 0 \--cache-max-entry-count 0.01\--server…

创建干净虚拟环境对YOLOV8进行打包

背景 基于Yolov8写了一个视频检测小demo,考虑后续要到项目上使用,所以研究了一下打包流程。使用的工具是Pyinstaller,在原有的环境下面打包发现,大小有6个多G。所以想再弄一个干净的环境,只安装需要的模块&#xff0c…

前端基础4

本节内容: 1.CSS的弹性布局,也称Flex布局 2.Vue2的生命周期 一、Flex布局 弹性布局是前端页面布局最常用的方式之一,通常使用四个属性。 1.创建盒子 先创建一个盒子并为其添加一些样式可以更直观的体验弹性布局,代码如下&#…

xcode如何编译python

1、找到Python位置: 终端输入:which python 获取python的安装位置,一般为/usr/bin/python。获取到这个路径方便使用它来搭建python的编译环境。 2、在Xcode中创建python程序 打开Xcode,新建工程(ShiftCommandN&…

前端基础知识(一些基本标签的用法)

前端:html,css,javascript html:超文本结构化标记语言 使用角度 1、供显示的元素 2、供收集信息的元素 css层叠联样式单 选择器(给谁做样式) 盒子模型(了解html元素内部结构) 布局(把元素进行摆布&a…

C语言 | Leetcode C语言题解之第352题将数据流变为多个不想交区间

题目: 题解: typedef struct SummaryRanges{int left,right;struct SummaryRanges *pre,*next; } SummaryRanges;/** Initialize your data structure here. */SummaryRanges* summaryRangesCreate() {SummaryRanges *head malloc(sizeof(SummaryRange…

nlohmann json库的使用Demo

目录 1 简介 2 构建 JSON 对象 2.1 集合 2.2 字典 2.3 组合 3 解析 JSON 对象 4 演示Demo 4.1 开发环境 4.2 功能介绍 4.3 下载地址 1 简介 nlohmann/json 是一个方便易用的 C JSON 库,可以实现将 JSON 数据与 C 对象相互转换的功能,支持常见的…

Linux驱动开发—设备模型框架 kset和 kobject 详解

文章目录 什么是设备模型?设备模型的主要组成部分设备模型的关键功能设备模型的实现结构设备模型的重要性 kset和 kobject介绍1. kobject2. kset3. kobject 和 kset 的关系4. 应用场景 kobject中parent概念1. parent 字段的作用2. parent 字段的使用示例3. sysfs 中…

算法的学习笔记—对称的二叉树(牛客JZ28)

😀前言 在算法的世界中,二叉树是一个极其重要的数据结构。它不仅广泛应用于各种算法的设计中,也是面试中常见的考察点之一。今天,我们将深入探讨一个经典的二叉树问题——对称的二叉树,并且会展示如何通过Java代码来解…

stripe Element 如何使用

这里要准备好几个东西: 一个支付成功过后的回调 还有一个下单的接口 一旦进入这个下单界面,就要去调下单的接口的,用 post, 这个 接口你自己写,可以写在后端中,也可以放到 nextjs 的 api 中。 首先说的是这个下单…

去中心化的新时代:Web3技术的全球影响

随着技术的不断演进,Web3正引领互联网的去中心化新时代。相较于传统的Web1和Web2,Web3通过去中心化、区块链和智能合约等技术,正在重塑网络的运作方式。这一变革不仅提升了网络的安全性和透明度,也对全球经济、社会和文化产生了深…

品牌出海新策略:携手TikTok达人,合作孵化IP实现双赢

在当今数字化时代,TikTok达人的IP孵化作为一种创新的合作模式,正逐渐成为品牌出海的新兴策略。通过与有潜力的TikTok达人合作,共同孵化新的IP,品牌不仅能够突破传统营销的局限,还能实现与达人共同成长的双赢局面。本文…

物流抓取机器人整体设计方案

一、功能简介 1、运行环境:巡线行驶(7路数字循迹,麦克纳姆轮车底盘) 2、目标识别:颜色识别(Maix-II Dock 视觉模块) 3、目标定位:视觉测距(Maix-II Dock 视觉模块&#x…

海外直播对网络的要求有哪些?

在全球化的大潮中,海外直播已成为越来越多企业、个人和机构展示自身、拓展市场、与全球用户互动的重要渠道。然而,在进行海外直播时,网络环境的搭建往往成为制约其成功与否的关键因素。那么,究竟什么样的网络环境才能满足海外直播…