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. Java Number类和Math类

    Java Number类 一般的,当需要使用数字的时候,我们通常使用内置数据类型,如:byte.int.long.double等. 然而,在实际开发过程中,我们经常会遇到需要使用对象,而不是内置数据类 ...

  2. 如何修改WP文章字体格式、字号大小、字体颜色

    在使用wordpress编辑文章的时候,很多朋友会像小编一样,发现它并没有像word文档一样有修改字体样式.字体大小.字体颜色.分页符等功能按钮,对我们写文章极为不便,原因是wordpress默认使用 ...

  3. c++　getline()

    #include <iostream>#include <string> int main (){ std::string name; std::cout << & ...

  4. Django+Nginx+uwsgi搭建自己的博客（六）

    这篇应该是2017年的最后一篇博客了,在这里首先祝大家元旦快乐! 从这篇博客开始,将会介绍Blogs App的功能实现,包括数据模型的建立.相关功能的视图函数的实现.前端页面的设计等,这意味着我们即将 ...

  5. Django 如何实现 如下 联表 JOIN 查询？

    SQL语句: select distinct a.device_hash, sum(b.cmn_merge_count) from (select distinct device_hash from ...

  6. shell中的cat和文件分界符(<<EOF) (转)

    原文地址: http://blog.csdn.net/mosesmo1989/article/details/51123257 在shell中,文件分界符(通常写成EOF,你也可以写成FOE或者其他任 ...

  7. android intent 传递 二进制数据

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 实现序列化.

  8. luogu P2619 [国家集训队2]Tree I

    题目链接 luogu P2619 [国家集训队2]Tree I 题解 普通思路就不说了二分增量,生成树check 说一下坑点 二分时,若黑白边权有相同,因为权值相同优先选白边,若在最有增量时出现黑白等 ...

  9. POJ3710 Christmas Game 博弈论 sg函数 树的删边游戏

    http://poj.org/problem?id=3710 叶子节点的 SG 值为0:中间节点的SG值为它的所有子节点的SG值加1后的异或和. 偶环可以视作一个点,奇环视为一条边(连了两个点). 这 ...

  10. 【最大独立集】BZOJ3175- [Tjoi2013]攻击装置

    [题目大意] 给定一个01矩阵,其中你可以在0的位置放置攻击装置.每一个攻击装置(x,y)都可以按照“日”字攻击其周围的 8个位置(x-1,y-2),(x-2,y-1),(x+1,y-2),(x+2, ...