实现效果如下：


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

<!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. mysql语句1-创建库和表

    一.DDL数据定义语言 就是对书库内部的对象进行创建.删除.修改等操作的语言. 关键字:create  drop  alter 1.连接数据库 mysql -u用户名 -p -h指定主机(不指定默认是 ...

  2. centos6.5搭建Apache-虚拟主机

    一.配置基于域名的虚拟用户 1.创建虚拟用户的网页根目录 cd /usr/local/httpd/htdocs/ mkdir benetcom cd benetcom echo "<h ...

  3. CSS基础 精灵图的使用

    使用步骤1.创建盒子     <div class="one"></div>   2.使用PxCook量取图标大小,将图标的宽高设置成为盒子的宽高      ...

  4. css 基础 选择器的使用

    1.标签选择器解释:是针对一个标签做的样式,它会将匹配的所有标签都发生改变语法格式:标签名{ css样式代码 }2.类选择器特点:1.可以给某一个标签标记为一类,设定css样式,比较灵活 2.类目可以 ...

  5. [解决] No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android

    前端时间项目组让我改一个比较老的项目,说是用Android Studio2.3版本可以直接运行,于是我下载了一个2.3.2的,结果出现了一堆问题,总结下: 首先导入项目后build完直接报出:No t ...

  6. python 读取配置文件ini ---ConfigParser

    Python读取ini文件需要用到 ConfigParser 模块 关于ConfigParser模块的介绍详情请参照官网解释:https://docs.python.org/2.7/library/c ...

  7. markdownFormat

      对文档编辑主要还是用wps,因为以前毕业论文都是用的它来编排(刚开始用wps毕业论文的时候真的是用的想吐,感觉非常不好用,而且功能太多但对于自己需要的功能又偏偏找不到),用过几次后还觉得用它编辑文 ...

  8. MATLAB中回归模型

    (1).一元线性回归:数学模型定义      模型参数估计   检验.预测及控制 1.回归模型:   可线性化的一元非线性回归    (2).多元线性回归:数学模型定义 模型参数估计 多元线性回归中检 ...

  9. [USB波形分析] 全速USB波形数据分析(一)

    在之前的文章一次CAN波形分析之旅里,根据示波器采集的波形数据,详细地分析了CAN通信.今天来分析USB数据,还是同样的流程,但是这次使用matplotlib来协助分析. USB基本波形 USB通过一 ...

  10. golang gin框架中实现大文件的流式上传

    一般来说,通过c.Request.FormFile()获取文件的时候,所有内容都全部读到了内存.如果是个巨大的文件,则可能内存会爆掉:且,有的时候我们需要一边上传一边处理. 以下的代码实现了大文件流式 ...