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 - ...
随机推荐
- Shell 里空语句怎么写 - 半角的冒号
Python 里的空语句写作pass for x in range(10): pass Shell 里的空语句写作 : #!/bin/bash for x in {1..10} do #echo $x ...
- 查询Oracle数据库的字符集
How do you check the Oracle database character set? SQL> select value from nls_database_parameter ...
- java 多态 总结
1.前言 引用教科书解释: 多态是同一个行为具有多个不同表现形式或形态的能力. 多态就是同一个接口,使用不同的实例而执行不同操作. 通俗来说: 总结:多态的抽象类与接口有点相似: 父类不需要具体实现方 ...
- IE8和IE9下textarea滚动选中的问题
在IE8和IE9下如果textarea设置了样式overflow-y:auto;就不可以滚动选中了,应该样式写成overflow:auto;有了纵向滚动实际上就不会出现横向滚动的情况,也没有必要ove ...
- 《剑指offer》面试题30. 包含min函数的栈
问题描述 定义栈的数据结构,请在该类型中实现一个能够得到栈的最小元素的 min 函数在该栈中,调用 min.push 及 pop 的时间复杂度都是 O(1). 示例: MinStack minSt ...
- leetcode 233. 数字 1 的个数
问题描述 给定一个整数 n,计算所有小于等于 n 的非负整数中数字 1 出现的个数. 示例: 输入: 13 输出: 6 解释: 数字 1 出现在以下数字中: 1, 10, 11, 12, 13 . 问 ...
- Pyomo+GLPK使用
Pyomo下载安装 GLPK的下载和安装参考上一篇博客. mkdir Pyomo cd Pyomo wget https://github.com/Pyomo/pyomo/archive/5.6.6. ...
- deepin20体验
现在Ubuntu20吊打deepin20 100条街.撑了20天受不了deepin 优点 开机启动设置简单,即使不是应用商店的应用也很好 deepin仓库不用代理也很快.,而且有些Ubuntu下载不了 ...
- golang中自定义一些类型和对应类型的指针方法
package main import "fmt" // 项目开发中可以为type声明的类型编写一些方法,从而实现对象.方法的操作 // 声明类型 type myInt int / ...
- 项目管理软件jira安装
JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪.项目跟踪和敏捷管理等工作领域. 官方文档https://confluence.a ...