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.无参数的方法调用. 大家注意了,这个版本不能 ...
随机推荐
- SCTF 2014 pwn题目分析
因为最近要去做ctf比赛的这一块所以就针对性的分析一下近些年的各大比赛的PWN题目.主防项目目前先搁置起来了,等比赛打完再去搞吧. 这次分析的是去年的SCTF的赛题,是我的学长们出的题,个人感觉还是很 ...
- python调用api方式
1.shell版本 #!/bin/bash #根据api提供商,获取指定时间格式 datestr=`xxx` #根据api提供商,获取指定加盐密码格式 pwdstr=`xxx` curl -s -X ...
- JavaScript与C#互通的DES加解密算法
原文地址:传送门 本文提供了一个能使JavaScript与C#互通的DES加解密算法的实现,在前台页面中用JavaScript版本的DES算法将数据加密之后,传到服务器端,在服务器端可用C#版本的DE ...
- 用LR录制文件下载并随机产生文件名
用LR录制文件下载并随机产生文件名 {H.IY:X.Tn0 8h&~-D|6fV0Action()51Testing软件测试网GE$nV}s,R{51Testing软件测试网 }9sUS'q ...
- Python对Excel的操作
Python几个读取Excel库的介绍: xlwings 可结合 VBA 实现对 Excel 编程,强大的数据输入分析能力,同时拥有丰富的接口,结合 pandas/numpy/matplotlib 轻 ...
- 【BZOJ 2054】 2054: 疯狂的馒头 (并查集特技)
Input 第一行四个正整数N,M,p,q Output 一共输出N行,第i行表示第i个馒头的最终颜色(如果最终颜色是白色就输出0). Sample Input 4 3 2 4 Sample Outp ...
- 利用dll加载漏洞实现远程代码执行
微软的“不安全dll加载”漏洞涉及Windows XP至Windows 7等多个版本的操作系统.由于Windows存在加载未指明完整路径的dll文件的机制,可能导致用户在使用第三方软件.玩游戏.听音乐 ...
- [QSCOJ39]喵哈哈村的代码传说 第五章 找规律
题目大意: 给你n堆排,两人轮流对其中一堆牌进行以下操作之一: 1.从这堆牌中取出任意数量的牌: 2.将这这堆牌分为任意大小的3堆牌. 不能操作者负. 问先手是否有必胜策略. 思路: 尝试构造sg函数 ...
- bzoj 2809: [Apio2012]dispatching -- 可并堆
2809: [Apio2012]dispatching Time Limit: 10 Sec Memory Limit: 128 MB Description 在一个忍者的帮派里,一些忍者们被选中派 ...
- python开发_IDEL(Python GUI)的使用方法
在这篇blog"Python开发_python的安装"里面你会了解到python的安装. 安装后,我们希望能够运用python GUI来运行一些我们编写的程序,那么Python G ...