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 - ...
随机推荐
- STM32F3 GPIO的八种模式及工作原理
一.GPIO简介 GPIO(英语:General-purpose input/output),通用型之输入输出的简称,简单来说就是STM32可控制的引脚,STM32芯片的GPIO引脚与外部设备连接起来 ...
- .NET 云原生架构师训练营（组合模式）--学习笔记
目录 引入 组合模式 源码 引入 在上一篇执行 _connectionDelegate 之后,HttpConnectionMiddleware 处理请求 return connection.Proce ...
- HIVE理论学习笔记
概述 参加了新的公司新的工作新的环境之后,本人必须学习更多的知识,所以稳固之前的知识和学习新的知识是重中之重,新的公司把hadoop大部分的组件都进行了架构源码深度改造,所以使用过程确实遇到一些麻烦, ...
- openGL绘图基本框架
openGL绘图入门和导入外部文件 本文主要介绍通用绘图软件openGL的数据类型和基本的绘图框架,此外还提供了导入obj外部文件的方法,提供的代码稍作修改即可使用,希望能方便初学者快速上手. ope ...
- Spring系列2：Spring容器基本概念和使用
本文内容 简单回顾IoC和DI概念 Spring容器的概念 的xml配置和初始化 容器的基本使用 bean的定义和初始化配置 简单理解IoC和DI概念 什么是IoC控制反转? 通俗地但不严谨地讲,以前 ...
- [SWPUCTF 2018]SimplePHP
[SWPUCTF 2018]SimplePHP 知识点 1.PHP反序列化入门之phar 2.反序列化魔术方法 __construct()//当一个对象创建时被调用 __destruct() //当一 ...
- 系统信号SIGHUP、SIGQUIT、SIGTERM、SIGINT的场景
SIGHUP:hong up 挂断.本信号在用户终端连接(正常或非正常)结束时发出, 通常是在终端的控制进程结束时, 通知同一session内的各个作业, 这时它们与控制终端不再关联.登录Linux时 ...
- eclipse导入项目jdk版本不一样
一:eclipse导入项目jdk版本不一样解决方案 参考博文: https://www.cnblogs.com/chenmingjun/p/8472885.html 选中项目右键 --> Pro ...
- Docker 与 K8S学习笔记（十八）—— Pod的使用
Pod 是一组紧密关联的容器集合,它们共享IPC.Network和UTS namespace,是 Kubernetes 调度的基本单元.Pod 的设计理念是支持多个容器在一个 Pod 中共享网络和文件 ...
- gin中的重定向
package main import ( "github.com/gin-gonic/gin" ) func main() { // HTTP重定向很容易,内部.外部重定向均支持 ...