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. JavaScript 执行环境 与 变量对象

    什么是JS的执行环境? function funA(){ //一段代码静静的躺在这里,不能叫执行环境 } funA(); //当代码开始执行以后,系统会将它存入执行栈,并为他准备好足够的内存空间使用 ...

  2. android Webview Html5 相关文章

    Android WebView的使用集锦(支持Html5) http://blog.csdn.net/l_215851356/article/details/69239643 WebView详解与简单 ...

  3. 得分（UVa1585）

    题目具体描述见:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_prob ...

  4. c++ primer 2 变量和基本类型

    2.1 基本内置类型 基本内置类型是C++“自带”的类型,区别于标准库定义的类型.使用时不需要应用标准库就可以使用,我们可以理解为数字型有下面这些 整形:就是整数或者是没有小数位的数.它包括bool( ...

  5. CodeForces 803A Maximal Binary Matrix

    枚举. 枚举对角线上放多少个$1$,剩余的贪心放,更新答案. #include <iostream> #include <cstdio> #include <cstrin ...

  6. python中if和elif的区别

    多个if语句是每次单独判断 比如: 例子一: a = 5 if a < 6: #条件1 print(1) if a < 7: #条件2 print(2) else: print(3) 条件 ...

  7. 深入浅出Spring（三） AOP详解

    上次的博文深入浅出Spring(二) IoC详解中,我为大家简单介绍了一下Spring框架核心内容中的IoC,接下来我们继续讲解另一个核心AOP(Aspect Oriented Programming ...

  8. 【JAVAWEB学习笔记】网上商城实战4：订单模块

    今日任务 完成订单模块的功能 1.1      订单 模块的功能 1.1.1    我的订单: [我的订单的查询] * 在header.jsp中点击我的订单. * 提交到Servlet: * 获得用户 ...

  9. java项目日志系统的总结

    目录 日志系统归类以及关系 日志的三个组件 slf4j的使用 项目中构建日志系统 使用例子 日志系统归类以及关系 常用的日志框架: slf4j.logback .log4j.log4j2.JUL(ja ...

  10. Python开发基础-Day33 IO模型

    IO模型分类 五种IO Model blocking IO 阻塞IO nonblocking IO 非阻塞IO IO multiplexing IO多路复用 signal driven IO 信号驱动 ...