实现效果如下：


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

<!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>

js实现用按钮控制网页滚动、以及固定导航栏效果的更多相关文章

  1. 通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部（一）

    回到顶部实例一 效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...

  2. fullpage.js 结合固定导航栏—实现定位导航栏

    开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...

  3. 导航菜单：jQuery粘性滚动导航栏效果

    粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单 ...

  4. CSS制作一个简单网页的下拉导航栏

    网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...

  5. 使用 jQuery.Pin 垂直滚动时固定导航

    ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...

  6. iOS UITableView表视图滚动隐藏UINavigationController导航栏

    UITableView 继承于UIScrollView 所以UIScrollView 的代理方法相同适用于UITableView 中 隐藏导航栏的方法为: self.navigationControl ...

  7. JS实现让滚轮控制网页头部显示与隐藏

    在很多网站中都有鼠标网上滚动头部就会滑出,继续往下滚动就会隐藏,下面看看实现方法 scroll(); function scroll(){// 入口方法 这个方法是获取事件的兼容,获取delta -- ...

  8. h5滚动页面固定导航

    1.需要效果 2.实现方法 (1)原生js实现 document.addEventListener('scroll', function (event) { var scrollDamo = wind ...

  9. js实现滚动条下拉到一定程度固定结算栏

    实现效果如下: js代码实现如下: var a = $("body").height(); var b = $(window).height(); var c = a - b - ...

随机推荐

  1. CSS基础 实战案例 模拟小米官方导航栏

    效果图 html结构 <ul> <li><a href="#">Xiaomi手机</a></li> <li> ...

  2. Python_关于python2的encode（编码）和decode（解码）的使用

    在使用Python2时,我们习惯于在文件开头声明编码 # coding: utf-8 不然在文件中出现中文,运行时就会报错 SyntaxError: Non-ASCII character... 之类 ...

  3. ShardingJDBC

    ShardingJDBC的核心流程主要分成六个步骤,分别是:SQL解析->SQL优化->SQL路由->SQL改写->SQL执行->结果归并,流程图如下: sharding ...

  4. mysql数据库忘记root密码怎么办？

    mysql数据库忘记root密码怎么破解和修改 1.停止数据库的运行 [root@localhost ~]# /etc/init.d/mysqld stop 或者[root@localhost ~]# ...

  5. Java在linux环境下和windows环境下日期字符串显示不同

    图片如果损坏,点击链接: https://www.toutiao.com/i6511565147322974724/ 出现的现象: 在Java中我想要将当前的时间格式化为需要的字符串,然后存放到数据库 ...

  6. 百度地图BMap实现在行政区域内做标注

    使用环境 vue bmap.js element-ui 页面展示 前提步骤 在index中引入百度地图提供的js库 在使用的vue页面中实例化地图 <!-- 给id随便起给名字 --> & ...

  7. Jmeter中用例禁用

    1.在线程组下创建2个http请求(blogs和baidu),并且在Thread Group 添加[View Results Tree]和[View Results in Table] 2.选择[ba ...

  8. 三分钟：极速体验JAVA版目标检测(YOLO4)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  9. 超详细的编码实战，让你的springboot应用识别图片中的行人、汽车、狗子、喵星人（JavaCV+YOLO4）

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  10. Spring 官宣发布 Spring Boot 3.0 第一个里程碑 M1，从 Java 8 提升到 Java 17！

    Spring官方于2022年1月20日发布Spring Boot 3.0.0-M1版本,预示开启了Spring Boot 3.0的里程碑,相信这是通往下一代Spring框架的激动人心的旅程. 接下来一 ...