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. 《数据结构与STL-第二章 线性表》读书笔记

    线性表 定义 线性表(linear list)是由零个或多个相同类型的数据元素构成的有限序列. 存储结构 顺序存储 最简单的存储方法是顺序存储法,即把线性表的数据元素按照逻辑次序顺序地放在一组地址连续 ...

  2. 解决IE的背景颜色透明子元素不透明问题

    假设背景为黑色,70%半透明,对需要半透明的层用如下CSS background-color: #000000; /* background color for IE */ filter: alpha ...

  3. css3 box-sizing属性值详解

    box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,border和padding不计算入widt ...

  4. JAVA编程思想读书笔记（四）--对象的克隆

    接上篇JAVA编程思想读书笔记(三)--RTTI No1: 类的克隆 public class MyObject implements Cloneable { int i; public MyObje ...

  5. python沙盒逃逸

    前言 最近遇到了很多python沙盒逃逸的题目(不知道是不是因为现在python搭的站多了--),实际使用时发现只会复制别人的payload是不够用的,于是自己来总结一波(顺带一提python沙盒逃逸 ...

  6. Linux下定时备份MySQL数据库的Shell脚本

    Linux下定时备份MySQL数据库的Shell脚本   对任何一个已经上线的网站站点来说,数据备份都是必须的.无论版本更新还是服务器迁移,备份数据的重要性不言而喻.人工备份数据的方式不单耗费大量时间 ...

  7. Redis学习篇（十）之排序

    SORT 按照键值从小到大或者从大到小的顺序进行排序 对数字进行排序 语法:SORT key [DESC] 默认情况下,是升序排序,可以指定DESC进行降序排序 对字母进行排序 语法:SORT key ...

  8. C和指针之学习笔记（3）

    第8章 数组 1.数组与指针 数组名是一个个元素的地址. int  a[10];  int  b[10];  int  *c; (1) c = & a[0]; &a[0]表示一个指向数 ...

  9. FastReport.Net使用：[24]其他控件（邮政编码(Zip Code),网格文本(Cellular Text)以及线性刻度尺(Linear Gauge)）

    邮政编码(Zip Code) Zip Code仅支持数字(0~9) Zip Code支持数据列绑定,表达式,文本等模式 可通过修改SegmentCount属性的值来确定Zip Code的位数. 数字右 ...

  10. 莫队p2 【bzoj3809】Gty的二逼妹子序列

    发现一篇已经够长了...所以就放在这里吧... http://hzwer.com/5749.html ↑依然是看大牛题解过的   袜子那道题太简单了.... 然后被这道题超时卡了一段时间....... ...