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

代码如下：

 <!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. Azure DevOps Server（TFS）: 在Excel中解除服务器同步

    通过Azure DevOps Server 提供与Excel集成的功能,用户可以非常便捷地使用Excel,实现工作项数据的同步. 对于需要批量处理数据.离线工作.制作临时报表的用户来说,这个功能必定成 ...

  2. Learning WCF：Fault Handling

    There are two types of Execptions which can be throwed from the WCF service. They are Application ex ...

  3. 文件上传和WAF的攻与防

    Author:JoyChouDate:20180613 1. 前言 本文的测试环境均为 nginx/1.10.3 PHP 5.5.34 有些特性和 语言及webserver有关,有问题的地方,欢迎大家 ...

  4. httpd: apr_sockaddr_info_get() failed for bogon

    AH00557: httpd: apr_sockaddr_info_get() failed for bogon AH00558: httpd: Could not reliably determin ...

  5. 用document.readyState实现网页加载进度条

    概述 之前以为给网页设置加载进度条很麻烦,今天一学真是超级简单,记录下来供以后开发时参考,相信对其他人也有用. readyState 主要运用了document.readyState和nprogres ...

  6. Shell-1--概念

  7. MySQL的时间、日期型

    MySQL的时间.日期型 MySQL中表示时间值的有DATE.时间类型为DATETIME.DATE.TIMESTAMP.TIME和YEAR.每个时间类型有一个有效值范围和一个"零" ...

  8. .NET手记-友盟消息推送服务器端加密算法的实现

    最近为App开发消息推送功能,这里我们采用了友盟的消息推送服务,但其后台简陋,可定制化程度低,所以决定接入服务器端API,在自己的服务器上部署一套推送服务. 其中涉及到很多问题,首先要解决的就是与友盟 ...

  9. win10 store 无法连接网络（原创）

    当你试过所有的解决攻略 都无效时,那么使用这个教程 关闭以下的蓝色框里的

  10. dart之旅（一）

    前言 最近在看 dart 了,本着 "纸上得来终觉浅,绝知此事 markdown" 的原则,准备边学边写,写一个系列,这是第一篇.学习过程中主要是参考 A Tour of the ...