1.代码实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>05-jQuery- 回到顶部案例</title>

    <style>

        .bk-top-box {

            position: fixed;

            bottom: 40px;

            right: 10px;

            cursor: pointer;

        }

    </style>

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

    <script>

        $(function(){

            $("#J-bk-top").on('click',function(){

                $(window).scrollTop(0);

                $(window).scrollLeft(0);

            });

            $("#J_Box").on('click','h1',function(){

                //this  jQuery的事件响应方法中，this指向被点击的 dom对象

                this.innerHTML += '-';

                //dom对象转换成 jQuery对象

                $(this).text($(this).text() + 1);

            });

        });

    </script>

</head>

<body>

    <div class="bk-top-box" id="J-bk-top">

        <img src="imgs/bk-top3.jpg" height="44" width="44" alt="">

    </div>

    <!-- ctrl + shift + g  自动包裹标签 -->

     <div id="J_Box">

         <h1>传智播客1</h1>

         <h1>传智播客2</h1>

         <h1>传智播客3</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

         <h1>传智播客</h1>

     </div>

</body>

</html>

2.实际效果

jquery点击回到页面顶部方法的更多相关文章

  1. 基于JS实现回到页面顶部的五种写法(从实现到增强)

    这篇文章主要介绍了基于JS实现回到页面顶部的五种写法(从实现到增强)的相关资料,本文介绍的非常详细,实用性也非常高,非常具有参考借鉴价值,需要的朋友可以参考下   写法 [1]锚点 使用锚点链接是一种 ...

  2. jquery获取元素到页面顶部距离

    jquery获取元素到页面顶部距离的语句为: $(selector).offset().top

  3. vue 回到页面顶部

    模仿Element-UI 回到页面顶部 BackToTop.vue <template> <transition :name="transitionName"&g ...

  4. jQuery判断元素离页面顶部的高度

    <script language="javascript" type="text/javascript"> jQuery(document).rea ...

  5. jQuery、js全页面刷新方法

    下面介绍全页面刷新方法:有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象(用于框架) opener.loc ...

  6. 点击按钮回到页面顶部或者某个高度时的问题，JQUERY

    $('#shang').click(function(){ $('html,body').animate({scrollTop: '0px'}, 800); }); 不能写成$(window).ani ...

  7. jquery点击回到顶部

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

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

    最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS ...

  9. jQuery AJAX实现调用页面后台方法

    1.新建demo.aspx页面.2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 3.无参数的方法调用. 大家注意了,这个版本不能 ...

随机推荐

  1. CSU 1416 Practical Number

    原题链接:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1416 结论题,具体判断方法请点击这个网址. 筛素数是肯定的,但一开始定的范围太大了,想当 ...

  2. [Vuejs+php] MySQL数据转JSON传值到前端

    说在前面 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 优点如下[转]: 1.占带宽小(格式是压缩的) 2. js通过eval()进行Json读取(便 ...

  3. 使用BEEGO建立一个基本的API框架

    用BEE API命令生成框架. 然后自行更改MODELS,加入MYSQL支持ORM. 然后,自定义了字段的对应,表的名称等. 参考URL: http://www.cnblogs.com/studyzy ...

  4. IEEEXtreme 9.0 - Digit Fun!

    博客中的文章均为 meelo 原创,请务必以链接形式注明 本文地址 Xtreme 9.0 - Digit Fun! 题目来源:第9届IEEE极限编程大赛第1题 Recurrence relations ...

  5. 【LOJ】 #2130. 「NOI2015」软件包管理器

    题解 连树剖我都写跪一次,我现在怎么那么老年啊= = 简直滚粗预定了啊.. 我们线段树维护树剖只需要资瓷区间覆盖和区间求和就好了 安装的时候看看自己到根有多少包装了,dep减去这个数量就好 卸载的时候 ...

  6. 十 使用dict和set

    dict Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度. 举个例子,假设要根据同学的名字 ...

  7. linux 把ls -R格式化成树状结构

    谁能写脚本把linux中的ls -R命令的结果格式化成树状结构? 最好是shell脚本!欢迎讨论! 参与讨论有可能意外获取iPhone6哦~~

  8. ref:一系列用于Fuzzing学习的资源汇总

    ref:http://www.freebuf.com/articles/rookie/169413.html 一系列用于Fuzzing学习的资源汇总 secist2018-04-30共185833人围 ...

  9. Python并发编程-SocketServer多线程版

    #server.py import socket from threading import Thread def chat(conn): conn.send(b'hello') msg = conn ...

  10. XV6操作系统代码阅读心得（四）：虚拟内存

    本文将会详细介绍Xv6操作系统中虚拟内存的初始化过程. 基本概念 32位X86体系结构采用二级页表来管理虚拟内存.之所以使用二级页表, 是为了节省页表所占用的内存,因为没有内存映射的二级页表可以不用分 ...