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.无参数的方法调用. 大家注意了,这个版本不能 ...
随机推荐
- appium---【Mac】Appium-Doctor提示WARN：“ ios_webkit_debug_proxy cannot be found”解决方案
“ ios_webkit_debug_proxy cannot be found”报错截图如下: 解决方案: 打开terminal终端,分别输入执行结束,再次运行appium-doctor即可看到运行 ...
- go中操作json
package main import ( "encoding/json" "fmt" ) type Server struct { ServerName st ...
- pdb-不需要IDE也能调试
python中有个pdb模块,使python代码也可以像gdb那样进行调试,一般情况下pdb模块可以在代码内直接使用,也可以通过命令行参数的形式添加该模块进行调试(python -m pdb file ...
- Linux文件访问和日志
一.文件系统创建一个文件的过程假设我们想要新增一个文件,此时文件系统的行为是:先确定用户对于欲新增文件的目录是否具有 w 与 x 的权限,若有的话才能新增:根据 inode bitmap 找到没有使用 ...
- 性能测试常用的linux命令
性能测试常用的linux命令 linux测试nginx64bitredhatlighttpd 查看日志 awk '$4 ~/^\[27\/Nov\/2008:15:2[0-5]/ {print ...
- tornado中的cookie
1. cookie与session的区别: Session:通过在服务器端记录用户信息从而来确认用户身份,保存在服务器上,每个用户会话都有一个对应的session Cookie:通过在客户端记录信息确 ...
- 【U3D】播放器设置(PlayerSettings)
播放器设置 (Player Settings) 播放器设置 (Player Settings) 用于为您要在 Unity 中编译的最终游戏定义各项(特定于平台的)参数.例如,参数中的一些值用于您打开单 ...
- 洛谷P3292 [SCOI2016] 幸运数字 [线性基，倍增]
题目传送门 幸运数字 题目描述 A 国共有 n 座城市,这些城市由 n-1 条道路相连,使得任意两座城市可以互达,且路径唯一.每座城市都有一个幸运数字,以纪念碑的形式矗立在这座城市的正中心,作为城市的 ...
- export导出.xls时，在火狐的情况下出现表名乱码的情况的解决方案
response.setContentType("application/octet-stream; charset=utf-8");fileName = exportDataDt ...
- RxSwift 系列(二)
前言 Subject是一个代理,它既是Observer,也是Observable.因为它是一个Observer,它可以订阅一个或多个Observable;因为它是一个Observable,它又可以被其 ...