a超链接之返回顶部的两种实现方法
1.通过css实现：
为页面顶部如body或者自己设置的盒子等加上唯一id属性
<body id="id">
....
<a href="#id">返回顶部</a>
2.js实现
通过设置标签滚动位置判断
document.body.scrollTop=0;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cs_top{
position: fixed;
right: 10px;
bottom: 10px;
height: 60px;
width: 60px;
background-color: darkgray;
opacity: 0.5;
}
.js_top{
position: fixed;
right: 10px;
bottom: 120px;
height: 60px;
width: 60px;
background-color: rebeccapurple;
opacity: 0.5;
}
.hide{
display: none;
}
#content{
height:960px;
width: 100%;
}
#content:before{
content: 'top';
display: block;
}
body:after{
content: 'end';
display: block;
}
</style>
<script> </script>
</head>
<body onscroll="Func();">
<div id="content">
<p>fdffa</p>
<p>fdffa</p>
<p>fdffa</p>
<p>fdffa</p>
<p>fdffa</p>
<p>fdffa</p>
<p>fdffa</p>
<p>fdffa</p>
<p>fdffa</p>
</div>
<div class="cs_top">
<a href="#content">返回顶部</a>
</div>
<div class="js_top hide">
<a href="javascript:void(0);" onclick="GoTop();">返回顶部</a>
</div>
</body>
</html>
<script src="../02js拾遗/jquery.js"></script>
<script>
function Func(){
var scrollTop=document.body.scrollTop;
var ele=document.getElementsByClassName('js_top')[0];
if (scrollTop>50){
ele.classList.remove('hide');
}else{
ele.classList.add('hide');
}
} function GoTop(){
document.body.scrollTop=0;
} </script>
a超链接之返回顶部的两种实现方法的更多相关文章
- JavaScript监听手机物理返回键的两种解决方法
JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...
- angular2系列教程（十）两种启动方法、两个路由服务、引用类型和单例模式的妙用
今天我们要讲的是ng2的路由系统. 例子
- 两种Ajax方法
两种Ajax方法 Ajax是一种用于快速创建动态网页的技术,他通过在后台与服务器进行少量的数据交换,可以实现网页的异步更新,不需要像传统网页那样重新加载页面也可以做到对网页的某部分作出更新,现在这项技 ...
- jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...
- iOS学习——UITableViewCell两种重用方法的区别
今天在开发过程中用到了UITableView,在对cell进行设置的时候,我发现对UITableViewCell的重用设置的方法有如下两种,刚开始我也不太清楚这两种之间有什么区别.直到我在使用方法二进 ...
- win7系统不能用telnet命令的两种解决方法
电脑专业人员对telnet命令都不陌生了,Telnet当成一种通信协议,在日常工作中,经常面对网络问题的人都会用到telnet命令,因为简单有效,可以帮助更快的找出问题.要是在使用过程中碰到win7纯 ...
- JS中的两种刷新方法以及区别和适用范围
在项目中有一个人信息修改的页面,但是修改后显示的却是修改之前的内容,分析问题后发现查询语句写在了修改语句之前,有些某些需要又必须这么写,但是修改信息后先却显示之前的信息也太不科学了. 所以我就想用js ...
- 两种js方法发起微信支付：WeixinJSBridge，wx.chooseWXPay区别
原文链接:https://www.2cto.com/weixin/201507/412752.html 1.为什么会有两种JS方法可以发起微信支付? 当你登陆微信公众号之后,左边有两个菜单栏,一个是微 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
随机推荐
- 第一个Sprint
项目名字:四则运算APP 开发环境:java 团队名称:会飞的小鸟 团队成员:陈志棚 李炫宗 刘芮熔 徐侃 罗伟业 一.经过宿舍世纪讨论后我们剔除了一些不合理的设计,比如网站管理员这一部分在 ...
- 将J2EE的Web项目设置为支持Activiti
<natures> <nature>org.eclipse.jem.workbench.JavaEMFNature</nature> <nature>o ...
- PP-物料清单用户处理手册
1 系统操作时间 1. 新旧物料的替换需有BOM的产生2. BOM中组件发生变化时需有BOM的更改2 系统操作权限角色编码 角色名称Z:PP_PS_007_1000_200 PP主数据维护员 3 适应 ...
- Zabbix3.0学习笔记
第1章 zabbix监控 1.1 为什么要监控 在需要的时刻,提前提醒我们服务器出问题了 当出问题之后,可以找到问题的根源 网站/服务器 的可用性 1.1.1 网站可用性 在软件系统的高可靠性(也 ...
- Can you answer these queries? HDU - 4027（线段树+技巧）
题意:给一个数组序列, 数组长度为100000 两种操作: 一种操作是将某一个固定区间所有数开方(向下取整) 另一种操作是询问某个区间的所有数字之和. 由于数不超过263,因此开个七八次就变成1,由于 ...
- Python3网络爬虫（1）：利用urllib进行简单的网页抓取
1.开发环境 pycharm2017.3.3 python3.5 2.网络爬虫的定义 网络爬虫,也叫网络蜘蛛(web spider),如果把互联网比喻成一个蜘蛛网,spider就是一只在网上爬来爬去的 ...
- debian 系统安装配置apache
安装sshapt-get install ssh-server (安装失败请插入镜像)service ssh start Apache 服务安装apt-get install apache2 apa ...
- CodeForces 464E The Classic Problem | 呆克斯歘 主席树维护高精度
题意描述 有一个\(n\)点\(m\)边的无向图,第\(i\)条边的边权是\(2^{a_i}\).求点\(s\)到点\(t\)的最短路长度(对\(10^9 + 7\)取模). 题解 思路很简单--用主 ...
- luogu3203 弹飞绵羊 (LCT)
新建一个N+1的点,飞出去的连到这个上,记size,每次统计x和N+1的链长就可以. 别忘了编号是从0开始的 #include<cstdio> #include<cstring> ...
- Coablt strike官方教程中文译版本
安装和设置 系统要求 Cobalt Strike的最低系统要求 2 GHz +以上的cpu 2 GB RAM 500MB +可用空间 在Amazon的EC2上,至少使用较高核数的CPU(c1.medi ...