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

代码如下：

 <!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. PMP：4.项目整合管理

    内容中包含 base64string 图片造成字符过多,拒绝显示

  2. 使用TheFolderSpy监控文件夹的变化-邮件通知

    一.概述 当我们的文档或者代码文件发布在公网.共享文件夹中,其他用户具备访问或修改的权限时,就存在文档被覆盖或删除的分享.另外一个典型的场景,发布在Web服务器上的网页文件,在网站版本不更新的时间,服 ...

  3. [bug]”System.InvalidProgramException：公共语言运行时检测到无效程序“解决方案

    Visual Studio 2017版本15.8.x运行某些程序会报这样的错误:“System.InvalidProgramException:公共语言运行时检测到无效程序” 此问题的临时解决方案: ...

  4. 记一次安装VS2015后启动失败的修复过程

    安装过程没有提示任何问题,然而启动vs时提示没有安装 .Net Framework 4.6,那就安装吧,但是安装 4.6 时却提示 Windows Moudle Installer 服务没有启动,于是 ...

  5. PHP中url相关函数

    1,string urlencode(string $str)/string urldecode(string $str) urlencode将中文以及特殊字符转化为16进制,然后在每个字符前面加%: ...

  6. spring-boot（hello world）

    重拾程序,想不到从java开始,最近两周开搞web,从基本框架开始,仅做个人学习记录,遗漏之处望请海涵. 1.基本准备 开发环境win7: IDE  myeclipse Version: 2017 C ...

  7. Linux - 查看进程状态

    ps命令 report a snapshot of the current processes. 能提供一份当前进程的快照,以列表的形式显示正在运行的进程. 列出进程的数量取决于命令所附加的参数,例如 ...

  8. Java程序员必须掌握的常用Linux命令。

    Java程序员也是半个运维了,在日常开发中经常会接触到Linux环境操作.小公司的开发人员甚至是兼了全运维的工作,下面整理了一些常用的Linux操作命令. Linux常用指令 ls 显示文件或目录 - ...

  9. LeetCode手记-Add Binary

    问题描述 问题分析 分析题意,此题实际是求解两个二进制数的和,但是有两点要注意: 1.字符串的长度不限,所以相应十进制数值很可能会超过int的上限. 2.二进制的加法规则是自右向左进位,需要注意,以题 ...

  10. 常用的 git 命令清单

    (来自阮一峰的网络日志,看别人对git命令掌握的如此熟练,羡慕,但每次又记不得,无奈.供自己学习) git工作区,暂存区,版本库之间的关系: 我们建立的项目文件夹就是工作区,在初始化git(git i ...