JQ - 电商网站侧边导航

点击侧栏，滚动到指定位置
image.png
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style media="screen">
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .slider-left {
            position: fixed;
            right: 0;
            top: 100px;
        }

        .slider-left ul li {
            width: 100px;
            border: 1px solid #333;
            padding: 20px;
            background-color: lightblue;
        }

        .recreation,
        .finance,
        .music {
            width: 100%;
            height: 400px;
            background-color: pink;
            font-size: 50px;
            text-align: center;
        }

        .game,
        .news {
            width: 100%;
            height: 700px;
            background-color: #f44;
            font-size: 50px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="finance">财经</div>
        <div class="news">新闻</div>
        <div class="recreation">娱乐</div>
        <div class="game">游戏</div>
        <div class="music">音乐</div>
    </div>
    <div class="slider-left">
        <ul>
            <li>财经</li>
            <li>新闻</li>
            <li>娱乐</li>
            <li>游戏</li>
            <li>音乐</li>
        </ul>
    </div>

</body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    var $sliderLi = $('.slider-left ul li');
    var $Content = $('.content div');

    $sliderLi.on('click', function() {
        var $Top = $Content.eq($(this).index()).offset().top
        $('html,body').stop().animate({
            scrollTop: $Top
        }, 500)
    })
</script>

</html>
JQ - 电商网站侧边导航

推荐阅读更多精彩内容
