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超链接之返回顶部的两种实现方法的更多相关文章

  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. java可变参数长度

    一: 在python中 有可变参数*args和万能参数**args参数分别为列表和字典.在java中也有类似的可变参数列表.不过传递进去的是可变参数数组. package com.company; p ...

  2. Java面向对象（Eclipse高级、类与接口作为参数返回值）

      面向对象 今日内容介绍 u Eclipse常用快捷键操作 u Eclipse文档注释导出帮助文档 u Eclipse项目的jar包导出与使用jar包 u 不同修饰符混合使用细节 u 辨析何时定义变 ...

  3. CentOS7 截图

    https://blog.csdn.net/downing114/article/details/51433862 https://blog.csdn.net/lotluck/article/deta ...

  4. DELPHI XE10，JSON 生成和解析，再利用INDYHTTP控件POST

    Delphi XE10,Json 生成和解析,再利用indyhttp控件Post 年09月20日 :: 阅读数: --不多说,直接上代码 procedure TFrmMain.Brand; var J ...

  5. XSS编码与绕过

     XSS编码与绕过 0x00 背景 对于了解web安全的朋友来说,都知道XSS这种漏洞,其危害性不用强调了.一般对于该漏洞的防护有两个思路:一是过滤敏感字符,诸如[<,>,script,' ...

  6. 彻底弄懂jsonp原理及实现方法

    一. 同源策略 所有支持Javascript的浏览器都会使用同源策略这个安全策略.看看百度的解释: 同源策略,它是由Netscape提出的一个著名的安全策略. 现在所有支持JavaScript 的浏览 ...

  7. mysql数据库优化大全

    转载:https://blog.csdn.net/weixin_38112233/article/details/79054661 数据库优化 sql语句优化 索引优化 加缓存 读写分离 分区 分布式 ...

  8. 解决Ubuntu中vi命令的编辑模式下不能正常使用方向键和退格键的问题

    在Ubuntu中,进入vi命令的编辑模式,发现按方向键不能移动光标,而是会输出ABCD,以及退格键也不能正常删除字符.这是由于Ubuntu预装的是vim-tiny,而我们需要使用vim-full,解决 ...

  9. docker --swarm创建一个集群

    如果搭建错误可以强制脱离集群网络: docker swarm leave --force 初始化集群网络管理节点: docker swarm init --advertise-addr 10.101. ...

  10. python -- 面向对象三大特性

    1,继承 1,初识继承 什么是继承? ——继承是一种创建新类的方式,在python中,新建的类可以继承一个或多个父类,父类又可称为基类或超类,新建的类称为派生类或子类. 子类会“遗传”父类的属性,从而 ...