jq实现的楼层效果

最新推荐文章于 2020-04-23 17:18:29 发布

bibks

最新推荐文章于 2020-04-23 17:18:29 发布

阅读量2.5k

点赞数

文章标签：仿京东淘宝楼层效果jq实现的楼层效果完整

本文链接：https://blog.csdn.net/bibks/article/details/70907988

版权

这篇博客演示了如何使用jQuery创建一个楼层导航效果。通过监听滚动事件，实现了当滚动条到达特定位置时，对应的楼层目录高亮显示。同时，点击目录可以平滑滚动到相应的内容区域。示例代码包括HTML、CSS和JavaScript部分，适用于网页交互设计。

摘要由CSDN通过智能技术生成


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul{
            position: fixed;
            left: 0;
            top: 30%;
        }
        li{
            height: 40px;
            line-height: 40px;
            list-style: none;
            width: 100px;
            text-align: center;
            background: #f01;
            color: #ffffff;
            cursor:pointer;
        }
        a{
            color: #ffffff;
            text-decoration: none;
        }
        #a1{
  background: #dddddd;
            height: 900px;
            width: 90%;
            margin-left: 10%;
        }
        #a2{
  background: #dddddd;
            height: 900px;
            width: 90%;
            margin-left: 10%;
        }
        #a3{
  background: #ddddd