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. [前端随笔][css] 弹性布局

    说在前面 弹性布局,顾名思义就是有弹性,能够根据屏幕/当前空间大小自由伸缩的.使用弹性布局可以很好的适应各种尺寸的客户端. 关键代码 display:flex; 设定元素为弹性布局 <文档传送门 ...

  2. JS模块化规范CMD之SeaJS

    1. 在接触规范之前,我们用模块化来封装代码大多为如下: ;(function (形参模块名, 依赖项, 依赖项) { // 通过 形参模块名 修改模块 window.模块名 = 形参模块名 })(w ...

  3. JS~jwPlayer为js预留的回调方法大总结

    对于一个成功的产品,它是对外封闭的,但又是对外开放的,这句话并不矛盾,让我来说一下,说它对外封闭是因为它本身的代码不允许你去修改,而说它开放,是因为它为我们定义了很多API,或者叫回调方法,对于jwp ...

  4. info.plist文件里面添加描述 -> 配置定位,相册等

    <key>NSAppleMusicUsageDescription</key> <string>App需要您的同意,才能访问媒体资料库</string> ...

  5. 【C#】缓存数据

    namespace WpfCopy.Controls { public class CacheFileEventArgs : EventArgs { public bool IsFaulted { g ...

  6. Django Suit v2-dev 使用

    转:链接:https://www.jianshu.com/p/84fa8219fb48 官方文档: 链接 Git: 链接 install Django Suit 为了适配 Django 有许多不同的版 ...

  7. Scrapy 笔记（一）

    这篇文章主要是对的scrapy命令行使用的一个介绍 创建爬虫项目 scrapy startproject 项目名例子如下: scrapy startproject test1 You can star ...

  8. 洛谷P2151 [SDOI2009] HH去散步 [矩阵加速]

    题目传送门 HH去散步 题目描述 HH有个一成不变的习惯,喜欢饭后百步走.所谓百步走,就是散步,就是在一定的时间 内,走过一定的距离. 但是同时HH又是个喜欢变化的人,所以他不会立刻沿着刚刚走来的路走 ...

  9. Bzoj[Usaco2018 Feb]5194 Snow Boots（线段树）

    Description 到冬天了,这意味着下雪了!从农舍到牛棚的路上有N块地砖,方便起见编号为1…N,第i块地砖上积了fi英尺的雪 .在Farmer John的农舍的地窖中,总共有B双靴子,编号为1… ...

  10. hdu 3642 体积并

    题意:求三个矩形体积的并 链接:点我 枚举z #include<stdio.h> #include<iostream> #include<stdlib.h> #in ...