<!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. pymysql装饰器封装

    pymysql装饰器封装 def openClose(fun): def run(sql=None): coon =pymysql.connect(host='localhost' ,port=330 ...

  2. ipa重签名最直接的教程

    ipa 包重签名最新最简单教程 重签名的意义:ipa 重签名最大的用处是,不必重新打包,和配置其它第三方获取 appkey 等操作,直接重签名之后依然可以拥有这些功能,更快的发布测试或者灰度版本. 本 ...

  3. odoo开发笔记 -- 触发机制/埋点设置

    场景描述: 项目需求中,经常会需要,当某个字段处某个特定状态时候,触发执行特定的方法:或者创建某条记录的时候,同时做另一个操作:如何实现类似的需求? 实现方式: odoo中提供了几种触发方式: 1. ...

  4. Hive的两种操作模式

    Hive的客户端操作 Hive的客户端操作 通过JDBC操作Hive 通过Thrift操作Hive 通过JDBC操作Hive 首先 Hive 启动远程服务 hive --service hiveser ...

  5. Android Studio使用adb命令连接平板

    有需要使用adb命令连接调试平板的同学可以参考下(下面是android官方文档,有点老). http://donandroid.com/how-to-install-adb-interface-dri ...

  6. 032 SSM综合练习08--数据后台管理系统--jsp页面显示当前用户名

    1. 页面端标签控制权限 在jsp页面中我们可以使用spring security提供的权限标签来进行权限控制. (1)在pom文件中导入依赖 <dependency> <group ...

  7. mysql 启动 && 停止

    启动:service mysql start关闭:service mysql stop查进程:ps aux | grep mysql杀进程:kill -9 mysqlID Good Good Stud ...

  8. [NOIP2016]天天爱跑步-题解

    题面传送门 解答 设第\(j\)号玩家在\(V_j\)时刻出发. 弱化问题:如果树退化成了一条链.则在\(j\)处的观察员能观察到的\(i\)号玩家当且仅当 \[ i玩家经过j,且 \begin{ca ...

  9. JS中，JSON 和 对象互转，数组和字符串的转换？

    JSON 与 J对象转化 要实现从对象转换为 JSON 字符串,使用 JSON.stringify() 方法: 如下: var json = JSON.stringify({a: 'Hello', b ...

  10. Python爬虫：现学现用xpath爬取豆瓣音乐

    爬虫的抓取方式有好几种,正则表达式,Lxml(xpath)与BeautifulSoup,我在网上查了一下资料,了解到三者之间的使用难度与性能 三种爬虫方式的对比. 这样一比较我我选择了Lxml(xpa ...