js实现用按钮控制网页滚动、以及固定导航栏效果

实现效果如下：

在这里插入图片描述
页面内有三个按钮，分别控制页面向上、向下移动，以及暂停，并设置有导航栏，在滚动到某一位置时显示。且当用户主动控制鼠标滑轮时，滚动效果自动关闭。本页面只是演示如何实现，进行了简单的布局，没有过多的美化。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页滚动效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 80%;
            margin: 0 auto;
        }

        .nav {
            width: 100%;
            height: 200px;
            background-color: yellow;
        }

        .top {
            width: 100%;
            height: 400px;
            background-color: red;
        }

        .content1, .content2 {
            width: 100%;
            height: 600px;
            background-color: blue;
        }

        .bottom {
            width: 100%;
            height: 200px;
            background-color: green;
        }

        .flower {
            display: none;
            width: 100%;
            height: 50px;
            background-color: black;
            position: fixed;
            top: 0;
            opacity: 0.5;
        }

        .up, .down, .remove {
            display: inline-block;
            font-size: 40px;
            line-height: 50px;
            text-align: center;
            width: 50px;
            height: 50px;
            background-color: white;
            border: 1px solid #333333;
            border-radius: 50%;
            cursor: pointer;
            position: fixed;
            right: 40px;
        }

        .up:hover {
            background-color: #eaeaea;
        }

        .down:hover {
            background-color: #eaeaea;
        }

        .remove:hover {
            background-color: #eaeaea;
        }


        .up {
            bottom: 200px;
        }

        .down {
            bottom: 80px;
        }

        .remove {
            font-size: 25px;
            bottom: 140px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="nav"></div>
    <div class="top"></div>
    <div class="content1"></div>
    <div class="content2"></div>
    <div class="bottom"></div>
</div>
<div class="flower"></div>
<span class="up">△</span>
<span class="remove">♢</span>
<span class="down">▽</span>
</body>
</html>
<script>
    let up = document.querySelector('.up');
    let down = document.querySelector('.down');
    let remove = document.querySelector('.remove');
    let flower = document.querySelector('.flower');
    let nav = document.querySelector('.nav');

    let timer = null; //定时器
    let flag = false;  //控制定时器
    let speed = 10;   //控制滚动速度,数值越小越快
    document.addEventListener('scroll', function () {
        if (window.pageYOffset >= nav.offsetHeight) {
            flower.style.display = 'block';
        } else {
            flower.style.display = 'none';
        }
    });
    document.addEventListener('mousewheel', function () {
        stop();
    })

    up.addEventListener('click', startUp);
    down.addEventListener('click', startDown);
    remove.addEventListener('click', stop);


    function startUp() {

        stop();
        if (flag) {
            timer = setInterval(function () {
                document.documentElement.scrollTop--;
            }, speed);

        }
        flag = !flag;
    }

    function startDown() {

        stop();
        if (flag) {
            timer = setInterval(function () {
                document.documentElement.scrollTop++;
            }, speed);

        }
        flag = !flag;
    }

    function stop() {
        clearInterval(timer);
        flag = true;
    }
</script>
posted @ 2022-02-09 19:45  soberw-  阅读(1170)  评论(0)  编辑  收藏  举报