<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>back-top</title>

     <style type="text/css">

         #back-top{

             width: 40px;

             height: 40px;

             position: fixed;

             bottom: 40px;

             right: 20px;

             border: solid gray;

             text-align: center;

             font-size: 14px;

             cursor: pointer;

         }

         .contain {

             margin: 0 auto;

             width: 1000px;

             height: 2000px;

             background: red;

             font-size: 400px;

         }

     </style>

     <script src="jquery-3.4.1.js"></script>

     <script>

         $(function(){

             $('#back-top').click(function(){

                 // html，body取并级，处理浏览器兼容

                 $("html,body").animate({

                 scrollTop: 0,

                 screenLeft: 0,

                 }, 400);

             });

         });

     </script>

 </head>

 <body>

     <div id="back-top">回到顶部</div>

     <div class="contain">这里是内容</div>

 </body>

 </html>

结果

jQuery-使页面回到顶部的更多相关文章

  1. jQuery实现页面回到顶部功能

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. jquery 插件页面回到顶部

    引用: jquery.scrollUp.min.js js: $.scrollUp({ scrollName: 'scrollUp', // Element ID topDistance: '300' ...

  3. jQuery写toTop(回到顶部)效果

    在通常的网站开发中,页面有时候会很长,尤其是一些电商网站,为了提高用户的体验效果,我们通常会增加一个回到顶部的按钮,这个按钮我们同城会使用fixed定位,将其定位在当前可视区域某一固定位置.这个效果用 ...

  4. js——页面回到顶部

    很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...

  5. 【JQ+锚标记实现点击页面回到顶部】

    前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...

  6. jquery点击回到顶部

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

  7. 使用 jQuery 页面回到顶部

    function backTop() { $(window).scroll(function () { if ($(window).scrollTop() > 100) { $("#t ...

  8. JS实现页面回到顶部效果

    [代码] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  9. jQuery中页面返回顶部的方法总结

    当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点. 方法一 锚点定位 ? 1 <a href="#" class ...

随机推荐

  1. java命名总结

    下文主要来源于网上,我做了一些编辑整理. “如果你不知道一件事物叫什么, 你就不知道它是什么. 如果你不知道这是什么, 你就不可能坐下来写代码.” ----萨姆·加德纳(Sam Gardiner) 1 ...

  2. 手动计算UTXO

    const TX_TYPE_IN = 1; const TX_TYPE_OUT = 2; export const CreateUtxos = async (address: string, data ...

  3. 【phpstudy2016】apache配置Tp5.0，获取表单数据总是多了一个路由变量，解决

    1.用的apahce配置tp5.0的php环境 2.发现input()过来的数据,总是多了一个变量,那就是路由变量, 类似[array(2) { ["/index/index/form_su ...

  4. 关于使用sudo找不到环境变量的问题

    参考这里:https://www.cnblogs.com/zhongshiqiang/p/10839666.html 使用sudo -E 保留当前用户环境,这时就不会存在找不到环境变量的问题了.

  5. url的长度问题

    url最长支持多少字符? 在http协议中,其实并没有对url长度作出限制,往往url的最大长度和用户浏览器和Web服务器有关,不一样的浏览器,能接受的最大长度往往是不一样的,当然,不一样的Web服务 ...

  6. Spring使用多个 <context:property-placeholder/>

    Spring中报"Could not resolve placeholder"的解决方案(引入多个properties文件) 解决方案: (1) 在Spring 3.0中,可以写: ...

  7. 工控随笔_24_西门子TIA 博图硬件目录的更新

    西门子博图软件,不但体积庞大,功能也很复杂,与经典的Step7相比,如果不是经常使用,一般都会有一种很难使用的感觉. 而且相比原来的Step7操作有点不太一样.这里简单的说一下硬件目录的更新. 有两种 ...

  8. 【ARM-Linux开发】【CUDA开发】NVIDIA TEGRA X1：LINUX驱动程序包多媒体用户指南

    NVIDIA TEGRA X1:LINUX驱动程序包多媒体用户指南 转载请注明作者和出处:http://blog.csdn.net/u011475210 嵌入式平台:NVIDIA Jetson TX1 ...

  9. 使用Docker快速搭建Zookeeper和kafka集群

    使用Docker快速搭建Zookeeper和kafka集群 镜像选择 Zookeeper和Kafka集群分别运行在不同的容器中zookeeper官方镜像,版本3.4kafka采用wurstmeiste ...

  10. （转）IntelliJ IDEA 插件 阿里巴巴Java开发手册（Alibaba Java Coding Guidelines）

    背景:idea安装插件,学习使用阿里巴巴开发插件. 在线和离线的安装方式. IntelliJ IDEA 插件 阿里巴巴Java开发手册(Alibaba Java Coding Guidelines) ...