回到顶部实例一

效果：默认隐藏导航栏，当滚动条滚到超过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. 静态日志框架Extensioner.Logging

    静态日志框架,输出文本文件,基于log4net扩展,轻量,方便,无侵入! 使用方法 执行Install-Package Extensioner.Logging -Version 2.0.0导入Nuge ...

  2. 使用批处理文件(.bat)启动多个CMD窗口并执行命令

    由于每次启动本机的kafka都需要打开2个cmd窗口,分别启动zookeeper服务和kafka服务,操作相对繁琐,于是想起了批处理来帮忙一键启动. 在桌面新建一个txt文件,改后缀名为.bat,并加 ...

  3. java 多线程：线程安全问题，示例DateFormat多线程执行冲突解决方案ThreadLocal、方法内变量

    SimpleDateFormat多线程中执行报错 java.lang.NumberFormatException: For input string: ""   import ja ...

  4. redis pipeset发布订阅

    #!/usr/bin/env python # Author:Zhangmingda import redis,time pool = redis.ConnectionPool(host='192.1 ...

  5. 事件处理 及冒泡 阻止默认事件 以及tab 切换的思路

    1.axios post通过点击事件提交数据不需要使用input直接使用state2.pdd你好天天象上默认执行点击(1,2,3)也可以执行并且能切换页码3.tab 针对新闻不同时4.天天象上首页和精 ...

  6. JAVA根据URL生成二维码图片、根据路径生成二维码图片

    引入jar包 zxing-2.3.0.jar.IKAnalyzer2012_u6.jar 下载地址:https://yvioo.lanzous.com/b00nlbp6h                ...

  7. Nacos配置中心+ASP.NET Core

    Nacos配置中心 nacos 是一个构建云原生应用的动态服务发现.配置管理和服务管理平台.. 源码已上传至 github 配置管理 asp.net core中所有的配置项,如appsetting.j ...

  8. 【LeetCode】628. Maximum Product of Three Numbers 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 方法一:排序 日期 题目地址:https://lee ...

  9. 【LeetCode】923. 3Sum With Multiplicity 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/3sum-wit ...

  10. 【LeetCode】60. Permutation Sequence 解题报告（Python & C++）

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