jQuery第二天笔记03——jq滚动对象练习

最新推荐文章于 2023-07-27 14:05:10 发布

·青红造了个白·

最新推荐文章于 2023-07-27 14:05:10 发布

阅读量116

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_43861647/article/details/119730712

版权

这是一个使用HTML、CSS和JavaScript实现的网页滚动时导航栏相应区域高亮以及点击回到顶部功能的示例。当页面滚动时，导航栏的相应链接会根据当前可视区域的内容自动添加'current'类，以突出显示对应的内容区。同时，通过JavaScript监听滚动事件和点击事件，实现了点击回到顶部的功能。

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

<!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>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        section>div {
            width: 1000px;
            height: 1000px;
            background: lime;
            margin-bottom: 100px
        }

        aside {
            position: fixed;
            right: 20px;
            top: 20px;
        }

        .current {
            background: lime;
        }

        li{
            cursor: pointer;
        }
    </style>
</head>

<body>
    <section>
        <div>京东秒杀内容</div>
        <div>特色优选内容</div>
        <div>频道广场内容</div>
        <div>为你推荐内容</div>
        <div>回到顶部内容</div>
    </section>
    <aside>
        <ul>
            <li class="current">京东秒杀</li>
            <li>特色优选</li>
            <li>频道广场</li>
            <li>为你推荐</li>
            <li>回到顶部</li>
        </ul>
    </aside>


    <script src="js/jquery.min.js"></script>
    <script>
        $(window).scroll(function () {
            // 获取标签距离页面原点的坐标  获取标签.offset().top
            if ($(window).scrollTop() < ($('section>div').eq(1).offset().top)) {
                $('ul li').eq(0).addClass('current');
                $('ul li').eq(0).siblings().removeClass('current');
            } else if ($(window).scrollTop() < ($('section>div').eq(2).offset().top)) {
                $('ul li').eq(1).addClass('current');
                $('ul li').eq(1).siblings().removeClass('current');
            } else if ($(window).scrollTop() < ($('section>div').eq(3).offset().top)) {
                $('ul li').eq(2).addClass('current');
                $('ul li').eq(2).siblings().removeClass('current');
            } else if ($(window).scrollTop() < ($('section>div').eq(4).offset().top)) {
                $('ul li').eq(3).addClass('current');
                $('ul li').eq(3).siblings().removeClass('current');
            }
        })
        $('ul li').eq(4).click(function () {
            $('html,body').animate({ 'scrollTop': $('section>div').eq(0).offset().top });
        });
        $('ul li').eq(4).siblings().click(function () {
            var index = $(this).index();
            $('html,body').animate({ 'scrollTop': $('section>div').eq(index).offset().top });
        })
    </script>
</body>

</html>