回到顶部实例一

效果：默认隐藏导航栏，当滚动条滚到超过300px后导航栏和按钮出现，点击回到顶部按钮回到顶部，并隐藏导航栏和按钮（导航栏和按钮都是固定定位）

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<style>

body {

	margin: 0;

	padding: 0;

	height: 3000px;    /*让滚动条出现*/

}

.DW {

	display: flex;           /*固定定位*/

	justify-content: center;  /*让文字水平居中*/

	align-items: center;      /*让文字垂直居中*/

	width: 100%;

	height: 80px;

	background-color: green;   /*背景颜色绿色*/

	color: aliceblue;

	font-size: 2em;

	transition: top .5s linear;  /*导航栏过渡出现和隐藏*/

	position: fixed;   /* 绝对定位，不管滚动条上下滚动都在相应的位置*/

	top: -80px;        /*隐藏导航栏*/

	left: 0;

}

.goTop {

	width: 50px;

	height: 50px;

	background-color: aquamarine;

	font-size: 20px;

	text-align: center;

	line-height: 25px;

	color: azure;

	position: fixed;    /*固定定位*/

	bottom: 50px;

	right: 50px;

	display: none;   /*隐藏按钮*/

}

	.divTop:hover+.topdhl{  /*隐藏的div触发时生效（兄弟关系） ，*/

        /*.divTop:hover .topdhl  （父子关系）*/

	  top: 0px;

	  transition: top .5s linear;  /*导航栏过渡出现和隐藏*/

	}

	.divdhl:hover{        /*导航栏触发时生效*/

		top: 0px;

	  transition: top .5s linear;  /*导航栏过渡出现和隐藏*/

    }

	.fusu{

	display: flex;           /*固定定位*/

	width: 100%;

	height: 10px;

	left: 0;

	}

</style>

</head>

<body >

	<div class="fusu divTop"></div>

<div class="DW topdhl divdhl" id="dhl">导航栏</div>

<buttion class="goTop" id="gotop">回到顶部</buttion>

<script>

	//获取导航栏和按量元素

	var topw=document.getElementById("dhl")

	var goTop=document.getElementById("gotop")

	//滚动滚动条触发事件

	    window.onscroll=function(){

		  //获取滚动条位置

		var jhlheight=document.documentElement.scrollTop||document.body.scrollTop

		//判断滚动条位置

		if(jhlheight>=300){

		topw.style.top="0px"      //显示滚动条

		goTop.style.display="block"	 //显示按钮

		}else{

		topw.style.top="-80px"     //隐藏滚动条

		goTop.style.display="none"	//隐藏按钮

   }

	}

	 //点击按钮事件

	  goTop.onclick=function(){

		window.scrollTo({     //设置滚动条位置

			top:0,            //回到顶部

			behavior:"smooth"   //平滑过渡

		})

	}  

	</script>

</body>

</html>

通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部（一）的更多相关文章

  1. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

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

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

  3. CSS盒子模型学习记录3（侧面导航栏）

    学习http://www.blueidea.com/tech/web/2007/4545_2.asp 代码试验 html <!DOCTYPE html PUBLIC "-//W3C// ...

  4. 网页首页制作总结（div+css+javascript）

    一.对网页整体布局,分几个版块 如下图所示: 确定布局之后,规划好网页,准备素材,按照标准文档流的顺序,从上到下,从左到右写入代码. 以上图为例,分为两部分,红色的主体部分和页脚.主体部分分割为头部. ...

  5. css firefox火狐浏览器下的兼容性问题

    1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-al ...

  6. 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现，如果移出导航栏3秒又隐藏起来，而且不受滚动条影响（二）

    通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...

  7. CSS实现动画特效导航栏

    0 写在前面 今天用纯CSS编写了一种带有特效的导航栏,一方面巩固熟悉了导航栏的一般写法,另一方面练习了CSS3的一些新特性. 1 实现效果 当鼠标划过时,实现了一种动态百叶窗效果. 2 实现细节 2 ...

  8. iOS 隐藏导航栏下的黑线

    一.找到导航栏下的黑线 // 寻找导航栏下的黑线 - (UIImageView *)findHairlineImageViewUnder:(UIView *)view { if ([view isKi ...

  9. css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡

    pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...

随机推荐

  1. Hystrix 监控可视化页面——Dashboard 流监控

    1.什么是Dashboard Hystrix-dashboard 是一款针对 Hystrix 进行实时监控的工具页面,通过 Hystrix Dashboard 我们可以在直观地看到各 Hystrix ...

  2. 创建Ubuntu server 服务器git项目

    服务器端: mkdir project.git cd project.git git init --bare cd .. p.p1 { margin: 0; font: 11px Menlo; col ...

  3. c++之Linux获取可用串口

    1.关于 这份代码来自: stackoverflow 2. 测试 2.1 测试环境: vmware + ubuntu, vmware添加串口(虚拟机关机后再添加) 2.2 测试输出 3. 源码 #in ...

  4. 【LeetCode】487. Max Consecutive Ones II 解题报告 (C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 动态规划 日期 题目地址:https://leetco ...

  5. E. Santa Claus and Tangerines

    E. Santa Claus and Tangerines time limit per test 2 seconds memory limit per test 256 megabytes inpu ...

  6. 利用shiro反序列化注入冰蝎内存马

    利用shiro反序列化注入冰蝎内存马 文章首发先知社区:https://xz.aliyun.com/t/10696 一.shiro反序列化注入内存马 1)tomcat filter内存马 先来看一个普 ...

  7. Max-Mahalanobis Linear Discriminant Analysis Networks

    目录 概 主要内容 Pang T, Du C, Zhu J, et al. Max-Mahalanobis Linear Discriminant Analysis Networks[C]. inte ...

  8. Are Loss Functions All the Same?

    目录 概 主要内容 一些假设 损失函数 损失函数的统计性质 收敛速度 分类的界 Rosasco L, De Vito E, Caponnetto A, et al. Are loss function ...

  9. 知识增强的预训练语言模型系列之ERNIE：如何为预训练语言模型注入知识

    NLP论文解读 |杨健 论文标题: ERNIE:Enhanced Language Representation with Informative Entities 收录会议:ACL 论文链接: ht ...

  10. [opencv]KAZE、AKAZE特征检测、匹配与对象查找

    AkAZE是KAZE的加速版 与SIFT,SUFR比较: 1.更加稳定 2.非线性尺度空间 3.AKAZE速度更加快 4.比较新的算法,只有Opencv新的版本才可以用 AKAZE局部匹配介绍 1.A ...