楼层滚动效果(超级简单,易懂)

news2024/11/14 19:45:54

系列文章目录

文章目录

  • 系列文章目录
  • 一、楼层滚动效果图如下
    • 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 = null
    var 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>

总结(收工)

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

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

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

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

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

相关文章

FreeRTOS学习笔记(二)——内核机制

文章目录 0x01 临界段Cortex-M内核快速关中断指令关中断开中断进入和退出临界段的宏进入临界段退出临界段临界段代码应用 0x02 空闲任务与阻塞延时的实现空闲任务的创建实现阻塞延时阻塞等待总结 0x03 多优先级通用方法&#xff1a;taskRECORD_READY_PRIORITY()taskSELECT_HIGH…

微服务学习——服务异步通讯

实用篇-RabbitMQ 初识MQ 同步调用的问题 微服务间基于Feign的调用就属于同步方式&#xff0c;存在一些问题。 耦合度高 每次加入新的需求&#xff0c;都要修改原来的代码性能下降 调用者需要等待服务提供者响应&#xff0c;如果调用链过长则响应时间等于每次调用的时间之和…

【数据库】事务的隔离级别以及实现原理

文章目录 前言一、事务什么是事务&#xff1f;事务的四大特性分别是 二、事务并发存在的问题脏读可重复读不可重复读幻读 三、以MYSQL数据库来分析四种隔离级别第一种隔离级别&#xff1a;Read uncommitted(读未提交)第二种隔离级别&#xff1a;Read committed(读提交)第三种隔…

此环境变量太大,此对话框允许将值设置为最长 2047 个字符

背景: 自己是一个计算机爱好者&#xff0c;又大体精通计算机各种编程语言&#xff0c;所以电脑上安装的各种编译或者编程软件比较多&#xff0c;有一天需要安装一个多版本的python环境&#xff0c;发现无法添加环境变量&#xff0c;于是乎&#xff0c;自己去查看原因并解决这个…

C语言 sizeof, size_t, strlen

C语言 sizeof, size_t, strlen 文章目录 C语言 sizeof, size_t, strlen一. sizeof1.1 返回结构体长度 二. size_t三. sizeof 和 strlen 一. sizeof 返回一个结构体或者类型所占的内存字节数 1.1 返回结构体长度 这里我编写了2个结构体&#xff0c;区别在于数组问题 #include …

智慧园区gis三维数字孪生可视化平台辅助管理者提升安全管控效力

随着信息技术的发展,3D可视化已经成为交互式管理的主流。智慧3D可视化交互管理平台能够帮助企业实现高效、灵活的管理。 1&#xff1a;智慧3D可视化交互管理平台的基本特性 智慧3D可视化交互管理平台能够实时显示工厂中生产车间的设备和生产线的运行状态&#xff0c;并通过交互…

火焰图怎么看

性能平台 通过该平台可以使用pprof采集线上的服务指标数据生成CPU占用数据并自动绘制出火焰图&#xff0c;Top&#xff0c;以及函数调用图等。 1.1 火焰图 火焰图的深度代表了函数的调用栈&#xff0c;火焰图最深处就是正在执行的函数&#xff0c;上方的都是它的父函数&#x…

C++线程的简单学习及了解

此篇文章只是线程的简单了解。 文章目录 前言一、线程的优缺点二、C线程库 1.thread类的简单介绍2.线程函数参数总结 前言 什么是线程&#xff1f; 在一个程序里的一个执行路线就叫做线程&#xff08;thread&#xff09;。更准确的定义是&#xff1a;线程是“一个进程内部的控…

git 使用大全及各种疑难杂症解决方法(长期更新)

Git使用中遇到的各种问题及解决方法 git clone后修改文件然后再上传覆盖 git push出现“Everything up-to-date”解决方法 git commit后如何撤销或修改 git 同步远程和本地的同名分支 git push异常问题出现符号解决方法 git 删除最近或者任意一次提交commit

Http详解

一、什么是Http协议 Http全称为超文本传输协议&#xff0c;是目前使用最主流的 应用层协议&#xff0c; 二、Http工作过程 当我们在浏览器中输入一个 “网址”, 此时浏览器就会给对应的服务器发送⼀个 HTTP 请求. 对方服务器收到这个请求之后, 经过计算处理, 就会返回⼀个 …

DAY06_常用API上

1&#xff1a;API 概述 1.1 API概述 如何自己设计对象并使用 获取已有对象并使用 而关于第一块知识&#xff1a;学习如何自己设计对象并使用&#xff0c;现在已经有一些基础了。 API(Application Programming Interface) &#xff1a;应用程序编程接口 那如何理解应用程序…

软件测试技术(四)白盒测试

白盒测试 白盒测试&#xff08;White Box Testing&#xff09;又称结构测试、透明盒测试、逻辑驱动测试或基于代码的测试。白盒测试只测试软件产品的内部结构和处理过程&#xff0c;而不测试软件产品的功能&#xff0c;用于纠正软件系统在描述、表示和规格上的错误&#xff0c…

IDEA弹出`Lombok requires enabled annotation processing`错误信息

问题背景 项目启动时&#xff0c;弹出一个报错窗口 问题原因 当您使用 Lombok 库时&#xff0c;您可能会遇到Lombok requires enabled annotation processing的错误消息。这是因为 Lombok 库使用了 Java 注解处理器&#xff08;annotation processor&#xff09;&#xff0c;而…

MySQL学习笔记第四天

第04章运算符 3.逻辑运算符 逻辑运算符主要用来判断表达式的真假&#xff0c;在MySQL中&#xff0c;逻辑运算符的返回结果为1、0或者NULL。 MySQL中支持4种逻辑运算符如下&#xff1a; 3.1逻辑非运算符 逻辑非&#xff08;NOT或!&#xff09;运算符表示当给定的值为0时返回…

【分布式技术专题】「分布式技术架构」手把手教你如何开发一个属于自己的限流器RateLimiter功能服务

限流器的算法选项 随着互联网的快速发展&#xff0c;越来越多的应用程序需要处理大量的请求。如果没有限制&#xff0c;这些请求可能会导致应用程序崩溃或变得不可用。因此&#xff0c;限流器是一种非常重要的技术&#xff0c;可以帮助应用程序控制请求的数量和速率&#xff0…

【JavaEE初阶】多线程(四)阻塞队列 定时器 线程池

文章目录 多线程案例阻塞队列概念生产者消费者模型标准库中的阻塞队列自己实现一个阻塞队列 定时器概念标准库中的定时器实现定时器 线程池标准库中的线程池工厂模式 ThreadPoolExecutor();构造方法参数详解(重点)实现线程池 多线程案例 阻塞队列 概念 阻塞队列是一种特殊的…

【软考备战·希赛网每日一练】2023年4月26日

文章目录 一、今日成绩二、错题总结第一题 三、知识查缺 题目及解析来源&#xff1a;2023年04月26日软件设计师每日一练 一、今日成绩 二、错题总结 第一题 解析&#xff1a; 数据耦合&#xff1a;一组模块借助参数表传递简单数据。 公共耦合&#xff1a;多个模块都访问同一个…

C++题解 | 逆波兰表达式相关

✨个人主页&#xff1a; 夜 默 &#x1f389;所属专栏&#xff1a; C/C相关题解 &#x1f38a;每篇一句&#xff1a; 图片来源 A year from now you may wish you had started today. 明年今日&#xff0c;你会希望此时此刻的自己已经开始行动了。 文章目录 &#x1f307;前言…

改进YOLOv8 | 即插即用篇 | YOLOv8 引入 RepVGG 重参数化模块 |《RepVGG:让VGG风格的卷积神经网络再次伟大》

我们提出了一种简单但功能强大的卷积神经网络结构,该模型在推理时类似于VGG,只有33的卷积和ReLU堆叠而成,而训练时间模型具有多分支拓扑结构。训练时间和推理时间结构的这种解耦是通过结构重新参数化技术实现的,因此该模型被命名为RepVGG。在ImageNet上,RepVGG达到了超过8…

手把手教你搭建属于自己的服务器

最近总是想搭建自己的网站&#xff0c;奈何皮夹里空空如也&#xff0c;服务器也租不起&#xff0c;更别说域名了。于是我就寻思能否自己搭建个服务器&#xff0c;还不要钱呢&#xff1f; 还真行&#xff01;&#xff01;&#xff01; 经过几天的冲浪&#xff0c;我发现有两个免…