1.通过css实现：

为页面顶部如body或者自己设置的盒子等加上唯一id属性

  1. <body id="id">
  2. ....
  3. <a href="#id">返回顶部</a>

2.js实现

通过设置标签滚动位置判断

  1. document.body.scrollTop=0;
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .cs_top{
  8.             position: fixed;
  9.             right: 10px;
  10.             bottom: 10px;
  11.             height: 60px;
  12.             width: 60px;
  13.             background-color: darkgray;
  14.             opacity: 0.5;
  15.         }
  16.         .js_top{
  17.             position: fixed;
  18.             right: 10px;
  19.             bottom: 120px;
  20.             height: 60px;
  21.             width: 60px;
  22.             background-color: rebeccapurple;
  23.             opacity: 0.5;
  24.         }
  25.         .hide{
  26.             display: none;
  27.         }
  28.         #content{
  29.             height:960px;
  30.             width: 100%;
  31.         }
  32.         #content:before{
  33.             content: 'top';
  34.             display: block;
  35.         }
  36.         body:after{
  37.             content: 'end';
  38.             display: block;
  39.         }
  40.     </style>
  41.     <script>
  42.  
  43.     </script>
  44. </head>
  45. <body onscroll="Func();">
  46.     <div id="content">
  47.         <p>fdffa</p>
  48.         <p>fdffa</p>
  49.         <p>fdffa</p>
  50.         <p>fdffa</p>
  51.         <p>fdffa</p>
  52.         <p>fdffa</p>
  53.         <p>fdffa</p>
  54.         <p>fdffa</p>
  55.         <p>fdffa</p>
  56.     </div>
  57.     <div class="cs_top">
  58.         <a href="#content">返回顶部</a>
  59.     </div>
  60.     <div class="js_top hide">
  61.         <a href="javascript:void(0);" onclick="GoTop();">返回顶部</a>
  62.     </div>
  63. </body>
  64. </html>
  65. <script src="../02js拾遗/jquery.js"></script>
  66. <script>
  67.     function Func(){
  68.         var scrollTop=document.body.scrollTop;
  69.         var ele=document.getElementsByClassName('js_top')[0];
  70.         if (scrollTop>50){
  71.             ele.classList.remove('hide');
  72.         }else{
  73.             ele.classList.add('hide');
  74.         }
  75.     }
  76.  
  77.     function GoTop(){
  78.         document.body.scrollTop=0;
  79.     }
  80.  
  81. </script>

a超链接之返回顶部的两种实现方法的更多相关文章

  1. JavaScript监听手机物理返回键的两种解决方法

    JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...

  2. angular2系列教程（十）两种启动方法、两个路由服务、引用类型和单例模式的妙用

    今天我们要讲的是ng2的路由系统. 例子

  3. 两种Ajax方法

    两种Ajax方法 Ajax是一种用于快速创建动态网页的技术,他通过在后台与服务器进行少量的数据交换,可以实现网页的异步更新,不需要像传统网页那样重新加载页面也可以做到对网页的某部分作出更新,现在这项技 ...

  4. jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)

    在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...

  5. iOS学习——UITableViewCell两种重用方法的区别

    今天在开发过程中用到了UITableView,在对cell进行设置的时候,我发现对UITableViewCell的重用设置的方法有如下两种,刚开始我也不太清楚这两种之间有什么区别.直到我在使用方法二进 ...

  6. win7系统不能用telnet命令的两种解决方法

    电脑专业人员对telnet命令都不陌生了,Telnet当成一种通信协议,在日常工作中,经常面对网络问题的人都会用到telnet命令,因为简单有效,可以帮助更快的找出问题.要是在使用过程中碰到win7纯 ...

  7. JS中的两种刷新方法以及区别和适用范围

    在项目中有一个人信息修改的页面,但是修改后显示的却是修改之前的内容,分析问题后发现查询语句写在了修改语句之前,有些某些需要又必须这么写,但是修改信息后先却显示之前的信息也太不科学了. 所以我就想用js ...

  8. 两种js方法发起微信支付：WeixinJSBridge，wx.chooseWXPay区别

    原文链接:https://www.2cto.com/weixin/201507/412752.html 1.为什么会有两种JS方法可以发起微信支付? 当你登陆微信公众号之后,左边有两个菜单栏,一个是微 ...

  9. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

随机推荐

  1. SQLserver 进程被死锁问题解决

    事务(进程ID xx)与另一个进程被死锁在 锁|通信缓冲区 资源上,并且已被选座死锁牺牲品.请重新运行该事务.Sqlserver 当出现这个错误时,如下图: 解决办法:更改数据库事务隔离级别 alte ...

  2. TDD中测试替身学习总结

    在使用TDD开发时,经常会遇到需要被测对象需要依赖其他子系统的情况,但是你希望将测试代码跟依赖项隔离,以保证测试代码仅仅针对当前被测对象或方法展开,这时候你需要的是测试替身.测试替身可以分为四类:- ...

  3. 安裝CentOS7后修復win7引导

    想尝试双系统的心情想必大家都能理解,但是安装了双系统之后的收尾工作也是必不可少的,由于对Linux并不算很熟悉,所以在这方面花了不少时间,这里将CentOS7下修復windows7引导的解决方案记录下 ...

  4. js面向对象高级编程

    面向对象的组成 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  5. Ubuntu16.04.3安装以及简单配置使用

    1. 官网下载ubuntu16.04.3的iso 2.上传至esxi 3. 中文安装界面有问题,使用english进行安装. 4. server版本的应该不带gui的界面进行安装... 5.使用非ro ...

  6. C++与C的区别

    在最开始C++只是C加上了一些面向对象的特性,C++最初的名字为C with Classes.后来C++又提出了一些不同于Class的特性:Exceptions(异常).templates(模板).S ...

  7. windows下git显示文件被修改，实际没有改动的问题解决办法

    不少开发者可能遇到过这个问题:从git上拉取服务端代码,然后只修改了一处地方,准备提交时,用diff软件查看,却发现整个文件都被修改了.这是git自动转换换行符导致的问题. 原因 不同操作系统使用的换 ...

  8. Node buffer模块缓冲区

    //1:字节 byte//1024b = 1kb [千字节]//1024kb = 1mb [兆字节]//1024mb = 1gb [吉字节]//1024gb = 1tb [梯]//1024tb = 1 ...

  9. Nginx ACCESS阶段 统一的用户权限验证系统

    L59 需要编译到Nginx --with-http_auth_request_module 功能介绍: 主要当收到用户请求的时候 通过反向代理方式生成子请求至上游服务器,如果上游服务器返回2xx 则 ...

  10. 荣耀实锤Magic2或将助力AI，再次带动成长？

    临近年底,热闹了一年的手机圈纷纷偃旗息鼓,准备为明年3月的新品发力.然而今天(12月7日),恰逢节气大雪,@荣耀手机 在微博发布了一张预热海报,随后荣耀总裁赵明转发这条微博表示「关于技术,真的有很多话 ...