回到顶部实例一

效果：默认隐藏导航栏，当滚动条滚到超过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. 19.CSS3

    前端三要素: HTML (结构)+ CSS(表现)+ JavaScript (行为) 一.什么是 CSS 1. CSS 是什么 CSS :Cascading Style Sheets ,层叠(级联)样 ...

  2. Python3.6+Django2.0以上 xadmin站点的配置和使用

    1. xadmin的介绍 django自带的admin站点虽然功能强大,但是界面不是很好看.而xadmin界面好看,功能更强大,并完全支持Bootstrap主题模板.xadmin内置了丰富的插件功能. ...

  3. Flask与Django的比较

    Flask与Django的区别 Flask Flask确实很"轻",不愧是Micro Framework,从Django转向Flask的开发者一定会如此感慨,除非二者均为深入使用过 ...

  4. 5、双指针技巧套路框架——Go语言版

    前情提示:Go语言学习者.本文参考https://labuladong.gitee.io/algo,代码自己参考抒写,若有不妥之处,感谢指正 关于golang算法文章,为了便于下载和整理,都已开源放在 ...

  5. selecter模块默认使用epoll 实现IO多路复用，展示单线程的并发效果

    import selectors import socket sel = selectors.DefaultSelector() def accept(sock, mask): conn, addr ...

  6. 从go程序中发消息给winform(C#)

    背景: 1.服务端语言为GO,客户端语言为:C#(WinForm): 2.在客户端操执行长耗时任务时,服务器应该将后台日志或定时将心跳信息及时传递给客户端,这样方便用户查看服务器执行情况(重要). 一 ...

  7. JAVA实现智能分词（通过文章标题生成tag标签）

    导入jar包 IKAnalyzer2012_u6.jar下载链接:https://pan.xunlew.com/s86789 maven <dependency> <groupId& ...

  8. 【九度OJ】题目1431：Sort 解题报告

    [九度OJ]题目1431:Sort 解题报告 标签(空格分隔): 九度OJ [LeetCode] http://ac.jobdu.com/problem.php?pid=1431 题目描述: 给你n个 ...

  9. PLSQL到期处理

    一.输入指令"regedit"打开注册表 二.指令输入完毕后,按回车键,会进入这个界面. 三.注册表里按HKEY_CURRENT_USER\Software\Allround Au ...

  10. 使用.NET 6开发TodoList应用(11)——使用FluentValidation和MediatR实现接口请求验证

    系列导航及源代码 使用.NET 6开发TodoList应用文章索引 需求 在响应请求处理的过程中,我们经常需要对请求参数的合法性进行校验,如果参数不合法,将不继续进行业务逻辑的处理.我们当然可以将每个 ...