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>
js实现用按钮控制网页滚动、以及固定导航栏效果的更多相关文章
- 通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部（一）
回到顶部实例一 效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...
- fullpage.js 结合固定导航栏—实现定位导航栏
开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...
- 导航菜单：jQuery粘性滚动导航栏效果
粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单 ...
- CSS制作一个简单网页的下拉导航栏
网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...
- 使用 jQuery.Pin 垂直滚动时固定导航
ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...
- iOS UITableView表视图滚动隐藏UINavigationController导航栏
UITableView 继承于UIScrollView 所以UIScrollView 的代理方法相同适用于UITableView 中 隐藏导航栏的方法为: self.navigationControl ...
- JS实现让滚轮控制网页头部显示与隐藏
在很多网站中都有鼠标网上滚动头部就会滑出,继续往下滚动就会隐藏,下面看看实现方法 scroll(); function scroll(){// 入口方法 这个方法是获取事件的兼容,获取delta -- ...
- h5滚动页面固定导航
1.需要效果 2.实现方法 (1)原生js实现 document.addEventListener('scroll', function (event) { var scrollDamo = wind ...
- js实现滚动条下拉到一定程度固定结算栏
实现效果如下: js代码实现如下: var a = $("body").height(); var b = $(window).height(); var c = a - b - ...
随机推荐
- RabbitMQ基础教程系列
Ubuntu16.04下,erlang安装和rabbitmq安装步骤 Ubuntu16.04下,rabbimq集群搭建 C# .net 环境下使用rabbitmq消息队列 .net core使用rab ...
- CAS学习笔记三：SpringBoot自动配置与手动配置过滤器方式集成CAS客户端
本文目标 基于SpringBoot + Maven 分别使用自动配置与手动配置过滤器方式集成CAS客户端. 需要提前搭建 CAS 服务端,参考 https://www.cnblogs.com/hell ...
- [学习笔记] Oracle字段类型、建表语句、添加约束
SQL语句介绍 数据定义语言(DDL),包括 CREATE. ALTER. DROP等. 数据操纵语言(DML),包括 INSERT. UPDATE. DELETE. SELECT - FOR UPD ...
- html基础 表单相关属性综合实战案例 附有注释
html结构代码: <form > <!-- form 为了让重置按钮生效--> <h1>青春不常在,抓紧谈恋爱</h1> <hr> 昵称: ...
- select 1 from 是什么意思？有什么作用？
参考:https://www.douban.com/note/518373959/ 一.select 1 from 的作用1.select 1 from mytable 与 select anycol ...
- sqlserver - 某字段数据为json串， 获取该json串里的值 的详细方法
1.前言 某字段的数据为json 但是我想只获取里面的某一个值,该怎么操作? 2.笔记 (1)用 JSON_VALUE(参数1,参数2)函数 ,有两个参数, (2)参数1 为 列名 ,参数2 为 js ...
- js字符串数组['1','2','3']转number
let arr = ['1','2','3']; arr.split(',').map(Number);
- 理解闭包--js面向对象编程
什么是闭包? 先看一段代码: function a(){ var n = 0; function inc() { n++; console.log(n); } inc(); inc(); } a(); ...
- 【解决了一个小问题】golang go.mod中多了一个斜杠导致replace无效
replace github.com/sxxx/common_lib/src/ => ../../common_lib/src 修改成 replace github.com/sxxx/commo ...
- WebGPU图形编程（2）：构建一个单色的三角形<学习引自徐博士教程>
非常兴奋,我坚持了下来,开始更新我的第二篇博客,还是关于WebGPU的,我在学习过程中,对这项技术非常感兴趣,即使它非常抽象,难以理解,因为我看到未来Web3D的发展,WebGPU会成为主流技术,学习 ...