<!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. S905系列的uboot分析

    Ubuntu18.04通过PL2303HX连接TTL 接线的连接 PL2303的3.3V悬空, TX接盒子RX, RX接盒子TX, GND接盒子GND 终端选择 系统自带pl2303的驱动, 可以通过 ...

  2. Ubuntu 安装最新版 (1.12) Golang 并使用 go mod

    wget https://dl.google.com/go/go1.12.4.linux-amd64.tar.gz sudo tar -zxvf go1.12.4.linux-amd64.tar.gz ...

  3. 软件开发的podcast

    目录 中文 喜马拉雅 https://www.ximalaya.com/ SingularFM 8个开发者值得一听的英文 Podcast https://zhuanlan.zhihu.com/p/24 ...

  4. layui中select实现二级关联

    目的:实现店铺和仓库的二级关联,通过选择不同的店铺,来显示这个门店对应的库位信息. 1. 在select选项上添加lay-filter选择器. <div class="layui-in ...

  5. 基于redis5的session共享：【redis 5.x集群应用研究】

    基于springsession构建一个session共享的模块. 这里,基于redis的集群(Redis-5.0.3版本),为了解决整个物联网平台的各个子系统之间共享session需求,且方便各个子系 ...

  6. 查看ssh有没有被黑的IP

    #grep "Failed password " /var/log/auth.log | awk '{print $11}' | sort | uniq -c | sort -nr ...

  7. bladex-boot推送harbor出错

    出错信息: Building image harbor.zhangshuiqing.com:8081/blade/Bladex-boot:2.2.1.release十二月 13, 2019 11:22 ...

  8. 使用Javascript从Google Places搜索api获取纬度和经度

    如何使用谷歌地图搜索框api从搜索到的位置获取经度和纬度. 我使用与谷歌演示相同的代码 – https://developers.google.com/maps/documentation/javas ...

  9. django 未成功初始化自定义表单

    用以下两句 python3 manage.py makemigrations python3 manage.py migrate 成功初始化了数据库,但是只初始化了django自带的表,未初始化我自定 ...

  10. Mac home目录下，创建文件夹，修改权限

    http://php-note.com/article/detail/35e782e145a94042923946cb142b5cd1 1.关闭 SIP 2.sudo mount -uw /