目标效果：浏览网页过程中，滑动滚轮，显示返回顶部按钮，点击返回顶部后，返回网页顶端。

代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body onscroll="r()">

     <div style="height: 1000px;background-color:lavender"></div>

     <a id="hide" href="#" style="display: none;height: 48px;width: 38px;background-color: bisque;position: fixed;bottom: 10px;right: 10px" onclick="f();">返回顶部</a>

     <script type="text/javascript">

         function r() {

                 document.getElementById('hide').style.display = '';

         };

         function f() {

            document.body.scrollTop = 0;

         };

     </script>

 </body>

 </html>

js之返回网页顶部的更多相关文章

  1. js常用返回网页顶部几种方法

    一.使用锚标记 此方法最简单,只需在body下放个隐藏的锚点标记,内容如下:  代码如下 复制代码 <a name="top" id="top">& ...

  2. 原生态js，返回至顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 前端 css+js实现返回顶部功能

    描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...

  4. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  5. JS网页顶部弹出可关闭广告图层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 基于原生js的返回顶部组件，兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

  7. js平滑滚动到顶部,底部,指定地方

    [原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...

  8. HTML5商城开发五 实现返回页面顶部

    本文内容主要是网上参考收集,介绍四种简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用Javascript Scroll函数动态返回等等. 一.使用锚标记返回页面顶部 使用HTML锚标记最 ...

  9. JS 弹出网页 (不显示地址栏,工具栏) 网页去掉地址栏

    JS 弹出网页 (不显示地址栏,工具栏) 网页去掉地址栏 window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 基本语法: ...

随机推荐

  1. JavaScripts中关于数字的精确计算方法

    问题描述: 37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) ,我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这 ...

  2. Swift5 语言指南(十) 枚举

    一个枚举定义了一个通用型的一组相关的值,使你在你的代码中的一个类型安全的方式这些值来工作. 如果您熟悉C,您将知道C枚举将相关名称分配给一组整数值.Swift中的枚举更灵活,并且不必为枚举的每个案例提 ...

  3. 利用SSH反向隧道，连接内网服务器

    前言 公司有一台文件服务器(内部使用,无外网IP),上面主要安装了SVN服务,用来存储和共享各部门的文档,因为都是内网,直接远程(mstsc)上去就可以方便维护,但最近公司租了新的办公室,部分员工被分 ...

  4. Spring boot 配置 log4j2.xml

    <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...

  5. Angular使用总结 --- 通过指令动态添加组件

    之前自己写的公共组件,都是会先引入,需要调起的时候再通过service控制公共组件状态.值.回调函数什么的.但是有一些场景不适合这种方式,还是动态添加组件更加好.通过写过的一个小组件来总结下. 创建组 ...

  6. [提权]MS16-016提权EXP

    MS16-016提权EXP[K8]Tested On Win7 x86Usage: ms16-016_win7.exe "whoami"by K8拉登哥哥 20160216 下载: ...

  7. HDU 6044--Limited Permutation（搜索+组合数+逆元）

    题目链接 Problem Description As to a permutation p1,p2,⋯,pn from 1 to n, it is uncomplicated for each 1≤ ...

  8. Hive ROW_NUMBER,RANK(),DENSE_RANK()

    准备数据 浙江,杭州,300 浙江,宁波,150 浙江,温州,200 浙江,嘉兴,100 江苏,南京,270 江苏,苏州,299 江苏,某市,200 江苏,某某市,100   创建表 CREATE t ...

  9. Android_学习系列(33)--App应用之提交到各大市场渠道

    本文同步更新在http://hmu140482.chinaw3.com/?p=315.    Android的终端碎片化问题,是一个很讨厌的问题.    而对于国内开发者来说,Android的市场“碎 ...

  10. 为什么byte的取值范围是-128到127

    一个byte由八个位组成,如00000000,其中,符号位+数值位,前7位表示数值,第8位是符号位(0为正,1为负).这样+1就是00000001,-1就是10000001.最大的正数就是0 1111 ...