当前位置： 首页 > news >正文

楼层滚动效果（超级简单,易懂）

news 2026/2/9 14:08:58

系列文章目录

文章目录

  • 系列文章目录
  • 一、楼层滚动效果图如下
    • 1. 下图是纯Css实现的楼层滚动
    • 2.通过Js优化后的楼层滚动如下图(🌹🌹)
  • 二、楼层滚动（Css实现）
    • 1.滚动原理
    • 2.代码如下
  • 三、楼层滚动（Js+Css优化后的楼层滚动）
    • HTML、CSS代码如下
    • JS代码如下
  • 总结（收工）

一、楼层滚动效果图如下

1. 下图是纯Css实现的楼层滚动

在这里插入图片描述

2.通过Js优化后的楼层滚动如下图(🌹🌹)

在这里插入图片描述

二、楼层滚动（Css实现）

1.滚动原理

  1. 使用了一个 Css的属性值 scroll-behavior 。 对应的信息可以查找网上的资料。
  2. 使用了锚点功能。和对应的 标签上的 id属性

2.代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}main {width: auto;height: 100vh;padding: 0 10px;overflow-y: scroll;scroll-behavior: smooth;}body ul {position: fixed;top: 50px;right: 50px;background-color: aliceblue;}ul li {width: 100%;height: 35px;line-height: 35px;text-align: center;border-bottom: 1px solid black;list-style: none;}ul li:active{background-color: rgb(255, 170, 0);}a {text-decoration: none;}a:hover {color: brown;}</style>
</head><body><ul><li> <a href="#sectionOne"> sectionOne</a> </li><li> <a href="#sectionTwo"> sectionTwo</a> </li><li> <a href="#sectionThree"> sectionThree</a> </li><li> <a href="#sectionFour"> sectionFour</a> </li><li> <a href="#sectionFive"> sectionFive</a> </li><li> <a href="#sectionSix"> sectionSix</a> </li><li> <a href="#sectionSeven"> sectionSeven</a> </li><li> <a href="#sectionEight"> sectionEight</a> </li></ul><main><section id="sectionOne" style="height: 500px;background-color: rgb(81, 185, 245);margin-bottom: 30px;">sectionOne</section><section id="sectionTwo" style="height: 500px;background-color: rgb(172, 176, 180);margin-bottom: 30px;">sectionTwo</section><section id="sectionThree" style="height: 500px;background-color: rgb(87, 216, 201);margin-bottom: 30px;">sectionThree</section><section id="sectionFour" style="height: 500px;background-color: aliceblue;margin-bottom: 30px;">sectionFour</section><section id="sectionFive" style="height: 500px;background-color: rgb(180, 153, 74);margin-bottom: 30px;">sectionFive</section><section id="sectionSix" style="height: 500px;background-color: rgb(96, 99, 175);margin-bottom: 30px;">sectionSix</section><section id="sectionSeven" style="height: 500px;background-color: rgb(224, 70, 238);margin-bottom: 30px;">sectionSeven</section><section id="sectionEight" style="height: 500px;background-color: rgb(226, 141, 101);margin-bottom: 30px;">sectionEight</section></main></body><script></script></html>

三、楼层滚动（Js+Css优化后的楼层滚动）

HTML、CSS代码如下

<style>* {padding: 0;margin: 0;}main {width: auto;height: 100vh;padding: 0 10px;overflow-y: scroll;scroll-behavior: smooth;}body ul {position: fixed;top: 50px;right: 50px;background-color: aliceblue;}ul li {width: 100%;height: 35px;line-height: 35px;text-align: center;border-bottom: 1px solid black;list-style: none;}a {display: inline-block;width: 100%;height: 100%;text-decoration: none;}a:hover {color: brown;}</style>

<body><ul><li><a href="#sectionOne"> sectionOne</a></li><li><a href="#sectionTwo"> sectionTwo</a></li><li><a href="#sectionThree"> sectionThree</a></li><li><a href="#sectionFour"> sectionFour</a></li><li><a href="#sectionFive"> sectionFive</a></li><li><a href="#sectionSix"> sectionSix</a></li><li><a href="#sectionSeven"> sectionSeven</a></li><li><a href="#sectionEight"> sectionEight</a></li></ul><main><section id="sectionOne" style="height: 500px;background-color: rgb(81, 185, 245);margin-bottom: 30px;">sectionOne</section><section id="sectionTwo" style="height: 500px;background-color: rgb(172, 176, 180);margin-bottom: 30px;">sectionTwo</section><section id="sectionThree" style="height: 500px;background-color: rgb(87, 216, 201);margin-bottom: 30px;">sectionThree</section><section id="sectionFour" style="height: 500px; background-color: aliceblue; margin-bottom: 30px">sectionFour</section><section id="sectionFive" style="height: 500px;background-color: rgb(180, 153, 74);margin-bottom: 30px;">sectionFive</section><section id="sectionSix" style="height: 500px;background-color: rgb(96, 99, 175);margin-bottom: 30px;">sectionSix</section><section id="sectionSeven" style="height: 500px;background-color: rgb(224, 70, 238);margin-bottom: 30px;">sectionSeven</section><section id="sectionEight" style="height: 500px;background-color: rgb(226, 141, 101);margin-bottom: 30px;">sectionEight</section></main>
</body>

JS代码如下

<script>let arr = [];let obj = nullvar sectionTags = document.querySelectorAll("section");var main = document.querySelector("main");var ul = document.querySelector("ul");var aTags = document.querySelectorAll("a");function removeColor() {aTags.forEach((element) => {element.style.background = "none";});}function getheight() {sectionTags.forEach((element) => {arr.push(element.offsetTop);});}function scrollMoveColor(e) {let scrollTop = e.srcElement.scrollTop;for (let i = 0; i < arr.length; i++) {if (scrollTop <= arr[i]) {removeColor();aTags[i].style.background = "rgb(255, 170, 0)";break;}}}getheight();main.addEventListener("scroll", scrollMoveColor);ul.addEventListener("click", function (e) {if (obj) {clearTimeout(obj)main.removeEventListener("scroll", scrollMoveColor);removeColor();e.target.style.background = "rgb(255, 170, 0)";}obj = setTimeout(() => {main.addEventListener("scroll", scrollMoveColor);}, 1000);});
</script>

总结（收工）

由于这里，只对跳转功能尽进行了展示。后续还会将【滚动条滚动到对应的区域】对应的标题进行高粱的功能进行优化！！ 💪💪

目前：超简单的楼层滚动效果已经✅

如果对代码有疑问（🤔️）的👨‍🎓(👩‍🎓)，一定要记得联系作者！！！！！！

相关文章：

楼层滚动效果（超级简单,易懂）

系列文章目录 文章目录 系列文章目录一、楼层滚动效果图如下1. 下图是纯Css实现的楼层滚动2.通过Js优化后的楼层滚动如下图(&#x1f339;&#x1f339;) 二、楼层滚动&#xff08;Css实现&#xff09;1.滚动原理2.代码如下 三、楼层滚动&#xff08;JsCss优化后的楼层滚动&…...

编程日记 2023/4/30 19:55:57

FPGA、 CPU、GPU、ASIC区别

一、为什么使用 FPGA&#xff1f; 众所周知&#xff0c;通用处理器&#xff08;CPU&#xff09;的摩尔定律已入暮年&#xff0c;而机器学习和 Web 服务的规模却在指数级增长。 人们使用定制硬件来加速常见的计算任务&#xff0c;然而日新月异的行业又要求这些定制的硬件可被重新…...

编程日记 2023/4/30 19:50:56

ChatGPT 之父承认 GPT-5 并不存在，为什么 OpenAI 总是这么实诚？｜万字详述

ChatGPT 诞生前传 来源: 爱范儿 微信号&#xff1a;ifanr 最近&#xff0c;OpenAI 的 CEO Sam Altman 在一场公开会议上为 GPT-5 辟谣。 他声称 OpenAI 并没有在训练 GPT-5&#xff0c;而是一直基于 GPT-4 做别的工作。 OpenAI 是一家非常有趣的机构&#xff0c;和微软、Go…...

编程日记 2023/4/30 19:45:55

华为交换机配置telnet登录图文教程

一、配置交换机管理vlan和地址&#xff0c;配置交换机接口 1.关闭多余的信息提示&#xff1a; [Huawei]undo in en Info: Information center is disabled. [Huawei] 2.交换机配置 在工作中通过Telnet方式登录交换机进行设备登录管理能更加便利&#xff0c;不需要到机房里…...

编程日记 2023/4/30 19:40:54

Linux：网络基础1

网络协议分层 所有网络问题&#xff0c;本质都是通信距离变长了&#xff0c;为了尽可能减少通信成本&#xff0c;定制了协议。 协议分层的优势&#xff1a; 软件设计方面的优势 - 低耦合 一般我们的分层依据: 功能比较集中&#xff0c;耦合度比较高的模块-- 一层 &#xff0c…...

编程日记 2023/5/30 18:20:52

Matlab对日期变量和时间变量的管理

Matlab2012a内置了三个函数 datanumdatevecdatestr 靠这三个函数&#xff0c;可以基本实现日期变量和时间变量的管理。下面直接来看。 &#xff08;1&#xff09;datanum 这个函数用来将字符串&#xff0c;日期矢量转为通用日&#xff08;数值型&#xff09;。所谓的通用日…...

编程日记 2023/4/30 19:30:52

js字符串 常用方法 并带详细讲解

JavaScript中字符串是一种基本数据类型&#xff0c;表示文本数据。字符串常用方法有以下几种&#xff1a; length&#xff1a;返回字符串的长度。 let str "hello world"; console.log(str.length); // 11indexOf&#xff1a;返回字符串中指定字符或子串的位置&am…...

编程日记 2023/4/30 19:25:50

Oracle_Audit_审计

1、什么是审计审计&#xff08;Audit)用于监视用户所执行的数据库操作&#xff0c;并且Oracle会将审计跟踪结果存放到OS文件&#xff08;默认位置为$ORACLE_BASE/admin/$ORACLE_SID/adump/&#xff09;或数据库&#xff08;存储在system表空间中的SYS.AUD$表中&#xff0c;可通…...

编程日记 2023/4/30 19:20:49

python算法中的深度学习算法之生成对抗网络（详解）

目录 学习目标： 学习内容： 生成对抗网络 Ⅰ. 生成器 Ⅱ. 判别器...

编程日记 2023/4/30 19:15:48

【VM服务管家】VM4.0软件使用_1.2 工具类

目录 1.2.1 文本保存&#xff1a;逐行保存格式化模块输出的方法1.2.2 脚本模块&#xff1a;循环模块搭配脚本使用的方法1.2.3 几何查找&#xff1a;彩色图像的几何查找方法1.2.4 深度学习&#xff1a;图像分割的面积的获取方法1.2.5 颜色识别&#xff1a;使用颜色识别工具做分类…...

编程日记 2023/4/30 19:10:47

Android系统架构

Application层&#xff0c;也就是应用层&#xff0c;不仅包括通话短信联系人这种系统级的应用&#xff0c;还包括用户自己安装的一些第三方应用Framework层&#xff0c;这一层大部分用Java写的&#xff0c;包括系统服务和四大组件Library层&#xff0c;这一层大部分都是C/C写的…...

编程日记 2023/6/1 11:08:04

零基础想成为黑客，只需要四步

前言 首先要明白&#xff0c;该篇文章说的黑客不是那种窃取别人信息、攻击别人系统的黑客&#xff0c;说的是调试和分析计算机安全系统的网络安全工程师。 黑客技术的核心之一就是渗透攻防技术&#xff0c;是为了证明网络防御按照预期计划正常运行而提供的一种机制。就是通过模…...

编程日记 2023/4/30 19:00:45

ChatGPT研究报告：AIGC带来新一轮范式转移

本文约4000字&#xff0c;目标是快速建立AIGC知识体系&#xff0c;含有大量的计算专业名词&#xff0c;建议阅读同时扩展搜索。 一、行业现状 1、概念界定 区别于PGC与UGC不同的&#xff0c;AIGC是利用人工智能技术自动生成内容的新型生产方式。 2、数据模态 按照模态区分&a…...

编程日记 2023/4/30 18:55:44

自助式数据分析平台：jvs数据智仓-统计报表的使用条件及界面介绍

统计报表界面介绍 统计报表是指利用表格和报表等形式&#xff0c;将数据以清晰的结构和布局的方式呈现出来&#xff0c;以便用户进行数据分析和决策制定的一种BI统计方法。表格式的BI统计通常采用交叉表格、分组表、报表等形式&#xff0c;对数据进行整合、分析和展示&#xff…...

编程日记 2023/4/30 18:50:43

php连接sqlserver

1.使用工具 Wampserver--3.3 sqlserver2023 php7.4.33 2.连接流程 1.下载Microsoft Drivers for PHP for SQL Server 下载地址&#xff1a;下载 Microsoft Drivers for PHP for SQL Server - PHP drivers for SQL Server | Microsoft Learn 2.下载Microsoft ODBC Driver …...

编程日记 2023/4/30 18:45:42

Android 9.0 原生SystemUI下拉通知栏UI背景设置为圆角背景的定制(一)

1.前言 在9.0的系统rom产品定制化开发中，在原生系统SystemUI下拉状态栏的通知栏的通知背景默认是白色四角的背景， 由于在产品设计中，需要把四角背景默认改成圆角背景，所以就需要分析系统原生下拉通知栏的每条通知的默认背景， 然后通知显示流程，设置默认下拉状态栏UI中的…...

编程日记 2023/4/30 18:40:41

vCenter(PSC)正常更改或重置administrator@vsphere.local用户的密码方法

1. 正常更改administratorvsphere.local用户密码 在vCenter界面中选择“菜单”下的“系统管理”&#xff0c;如下图所示&#xff1a; 然后在Single Sign On下的用户和组中&#xff0c;选择“vsphere.local”域&#xff0c;再对Administrator用户进行编辑&#xff0c;即可进行…...

编程日记 2023/4/30 18:35:40

【五一创作】Java 反射

在了解反射前&#xff0c;我们先要知道一些相关知识 Class类 Class类的实例表示java应用运行时的类或接口&#xff0c;每个java类运行时都在JVM里表现为一个class对象&#xff0c;可通过类名.class、类型.getClass()、Class.forName("类名")等方法获取class对象。 …...

编程日记 2023/4/30 18:30:39

常见元件、封装、尺寸、表面处理等

参考&#xff1a;https://www.bilibili.com/read/cv11024927?fromsearch&spm_id_from333.337.0.0 参考&#xff1a;https://www.bilibili.com/read/cv18413169?fromsearch&spm_id_from333.337.0.0 目录 通孔插件(THT)和表面贴装(SMT)技术封装类型SOP/SOIC封装DIP封装…...

编程日记 2023/4/30 18:25:38

作为一名8年测试工程师，因为偷偷接私活被····

接私活 对程序员这个圈子来说是一个既公开又隐私的话题&#xff0c;不说全部&#xff0c;应该大多数程序员都有过想要接私活的想法&#xff0c;当然&#xff0c;也有部分得道成仙的不主张接私活。但是很少有人在公开场合讨论私活的问题&#xff0c;似乎都在避嫌。就跟有人下班后…...

编程日记 2023/4/30 18:20:37

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2026/2/8 5:22:04

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2026/2/8 20:42:48

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2026/1/2 4:05:05

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/11/18 0:32:13

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/11/22 7:38:58

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2026/2/1 8:59:45

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2026/2/1 3:20:44

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2026/1/30 1:47:17

【Go语言基础【12】】指针：声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

编程新知 2025/6/21 2:18:57