jquery点击回到页面顶部方法
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点击回到页面顶部方法的更多相关文章
- 基于JS实现回到页面顶部的五种写法(从实现到增强)
这篇文章主要介绍了基于JS实现回到页面顶部的五种写法(从实现到增强)的相关资料,本文介绍的非常详细,实用性也非常高,非常具有参考借鉴价值,需要的朋友可以参考下 写法 [1]锚点 使用锚点链接是一种 ...
- jquery获取元素到页面顶部距离
jquery获取元素到页面顶部距离的语句为: $(selector).offset().top
- vue 回到页面顶部
模仿Element-UI 回到页面顶部 BackToTop.vue <template> <transition :name="transitionName"&g ...
- jQuery判断元素离页面顶部的高度
<script language="javascript" type="text/javascript"> jQuery(document).rea ...
- jQuery、js全页面刷新方法
下面介绍全页面刷新方法:有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象(用于框架) opener.loc ...
- 点击按钮回到页面顶部或者某个高度时的问题，JQUERY
$('#shang').click(function(){ $('html,body').animate({scrollTop: '0px'}, 800); }); 不能写成$(window).ani ...
- jquery点击回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS实现回到页面顶部动画效果 2016.03.23
最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS ...
- jQuery AJAX实现调用页面后台方法
1.新建demo.aspx页面.2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 3.无参数的方法调用. 大家注意了,这个版本不能 ...
随机推荐
- 如何使用OpenSSL工具生成根证书与应用证书
如何使用OpenSSL工具生成根证书与应用证书 一.步骤简记 // 生成顶级CA的公钥证书和私钥文件,有效期10年(RSA 1024bits,默认) openssl req -new -x509 -d ...
- Linux文件访问和日志
一.文件系统创建一个文件的过程假设我们想要新增一个文件,此时文件系统的行为是:先确定用户对于欲新增文件的目录是否具有 w 与 x 的权限,若有的话才能新增:根据 inode bitmap 找到没有使用 ...
- php简明学习教程
1.变量 <?php //变量声明(php变量无需单独创建,变量会在第一次赋值时创建) $a = 1; //弱类型(php变量会根据其值自动转换为相应的数据类型) $a = "a&qu ...
- lr11 controller打开提示cannot initialize driver dll，exiting
解决:在win7要以管理员身份运行才行的 问题2:在使用loadrunner时,从vuser generator启动controller的时候可能出现:由于另一个程序正在运行中 此操作无法完成.请选择 ...
- grep 同时排除多个关键字
不说废话, 例如需要排除 abc.txt 中的 mmm nnn grep -v 'mmm\|nnn' abc.txt 再举个例子,需要确定mac 的本机ip地址, 显然直接可以输入 ifcon ...
- 洛谷P1345 [USACO5.4]奶牛的电信 [最小割]
题目传送门 奶牛的电信 题目描述 农夫约翰的奶牛们喜欢通过电邮保持联系,于是她们建立了一个奶牛电脑网络,以便互相交流.这些机器用如下的方式发送电邮:如果存在一个由c台电脑组成的序列a1,a2,..., ...
- 洛谷P3919 【模板】可持久化数组 [主席树]
题目传送门 可持久化数组 题目描述 如题,你需要维护这样的一个长度为 $N$ 的数组,支持如下几种操作 在某个历史版本上修改某一个位置上的值 访问某个历史版本上的某一位置的值 此外,每进行一次操作(对 ...
- 【搜索】还是N皇后
先看题才是最重要的: 这道题有点难理解,毕竟Code speaks louder than words,所以先亮代码后说话: #include<iostream> using namesp ...
- Visual Studio 2017为Android APK包签名
Visual Studio 2017为Android APK包签名 为Android APK包签名,可以保证后期的App顺利升级.在Visual Studio 2015中,IDE会自动生成两个AP ...
- FastReport.Net使用：[35]奇偶行
文本控件类型的奇偶行数据实现(普通) 1.普通的奇偶行数据主要使用报表对象的EvenStyle(偶数行样式)属性实现. 首先通过 报表-->样式 菜单打开样式编辑器,编辑几个备用样式. 样式的编 ...