<!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. 个人收集的Android开源项目

    1. KnowWeather 下载:GitHub 一款 Android 开源天气 App ,包含天气信息.详情.生活指数等,通知栏,桌面小部件,定时更新天气等等,应用没有任何广告,支持县级.区级城市的 ...

  2. linux剪贴板

    ubuntu下的用户可以只用apt-get来安装: `sudo apt-get install xclip ` 其他发行版的用户可以选择自己的安装方式,也可以用源码编译安装,xclip项目的主页是:h ...

  3. Python统计数据库中的数据量【含MySQL、Oracle】

    Python程序文件如下: # -*- coding: utf-8 # File : start.py # Author : baoshan import json import pymysql im ...

  4. docker入门-基本概念（一）

    Docker是什么 Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源. Docker的应用场景 Web 应用的自动化打包和发布. 自动化测试和持续集成.发 ...

  5. 【Python】 vscode使用code-runner 调试代码

    插件名称: code-runner 插件设置: "code-runner.executorMap": { "python" : "set PYTHON ...

  6. [Python] 项目的配置覆盖与合并

    参考来源: https://www.liaoxuefeng.com/wiki/1016959663602400/1018490750237280 代码稍微修改了一下 import os import ...

  7. leetcode刷题系列(一) 26题 删除排序数组中的重复项

    题干 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成. 示 ...

  8. windos server2012安装.net core 2.2问题

    服务器是:WinServer 2012 Standard  X64 版本 服务器是:WinServer 2012 DataCenter R2 X64 版本.几个老站点本身正常.如题:.Net Core ...

  9. 009 SpringCloud 学习笔记5-----Hystrix保护机制

    1.概述 Hystrix,英文意思是豪猪,全身是刺,看起来就不好惹,是一种保护机制.Hystrix也是Netflix公司的一款组件.主页:https://github.com/Netflix/Hyst ...

  10. SQL Server 数据库启动过程（用户数据库加载过程的疑难杂症）

    前言 本篇主要是上一篇文章的补充篇,上一篇我们介绍了SQL Server服务启动过程所遇到的一些问题和解决方法,可点击查看,我们此篇主要介绍的是SQL Server启动过程中关于用户数据库加载的流程, ...