<!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. mac下使用java测试iOS推送

    首先mac下有很多现在的测试iOS推送软件,为什么要用java程序测试呢: 因为大多数后台推送服务可能是JAVA开发的,那么为了验证我们在MAC上导出的推送证书文件是否正确: 制作开发证书的iOS开发 ...

  2. openssl 自己制作ssl证书：自己签发免费ssl证书，为nginx生成自签名ssl证书

    server { listen 80; listen 443 ssl; server_name ~^((cloud)|(demo-cloud)|(demo2-cloud)|(approval1))(( ...

  3. Vue 项目中断点没有跳转到指定源码的问题

    将配置中 devtool 改为以下即可. devtool: 'source-map' 如果是在 vue-cli 2.x ,那么就在 webpack.dev.config.js 中 如果是 vue-cl ...

  4. Java: Java终止线程的几种方式

    首先说明,使用stop方法终止的方式已经在很久之前就被废弃了,在加锁的情况下有可能会造成死锁,这里不做讨论. 1. 使用标志位终止线程 在run()方法执行完毕后,该线程就终止了.但是在某些特殊的情况 ...

  5. JDBC 线程安全 数据库连接池

    jdbc 是线程安全的,但是,推荐一个线程用一个链接 JDBC is thread safe: It is quite OK to pass the various JDBC objects betw ...

  6. MQTT研究之EMQ：【eclipse的paho之java客户端使用注意事项】

    这里,简单记录一下自己在最近项目中遇到的paho的心得,这里也涵盖EMQX的问题. 1. cleanSession 这个标识,是确保client和server之间是否持久化状态的一个标志,不管是cli ...

  7. centos6.9安装python3.6.9独立的virtualenv环境，并且能正确引入ssl

    centos6.9安装python3.6.9独立的virtualenv环境,并且能正确引入ssl 1.编译安装python3.6环境# 安装依赖yum -y install zlib-devel bz ...

  8. awk：for循环输出文件名

    简单来说,有file1.txt, file2.txt, file3.txt file1.txt如下: 1 a 4 d d g file2.txt如下: 2 b g 6 9 0 file3.txt如下: ...

  9. 人脸识别（基于ArcFace）

    我们先来看看效果 上面是根据图片检测出其中的人脸.每个人脸的年龄还有性别,非常强大 第一步: 登录https://ai.arcsoft.com.cn/,注册开发者账号,身份认证,注册应用,得到APPI ...

  10. Embarcadero Delphi 7 Lite 7.0.4.453 中文版

    https://www.7down.com/soft/116014.html 软件介绍 Embarcadero Delphi 7精简版 是Windows平台下著名的快速应用程序开发工具(Rapid A ...