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.无参数的方法调用. 大家注意了,这个版本不能 ...
随机推荐
- you have to first modify the default Eclipse configuration to avoid XML cosmetic errors:
Configure XML Validation to Avoid Cosmetic Errors Navigate to: Window->Preferences->XML->XM ...
- loadrunner中自定义查找并替换函数
globas.h中定义 //LoadRunner中没有直接的函数支持查找并替换字符串,因此可以封装一个lr_replace函数出来: // ------------------------------ ...
- LoadRunner 中的 Unique Number 参数类型小结
- Could not apply the stored configuration for monitors
在用户目录下$user.home/.config/monitors.xml,要解决上面的问题,最简单的办法就是删除这个monitors.xml文件,重启一下电脑
- PHP原理之对象(一)
作者: Laruence( ) 本文地址: http://www.laruence.com/2008/08/22/412.html 转载请注明出处 或许你知道,或许你不知道,PHP是一个弱类型,动 ...
- phpstorm+xdebug远程调试设置
1 xdebug扩展安装 1.1 xdebug扩展安装: 2 服务器PHP配置 3 phpstorm设置 3.1 添加远程debug 3.2 phpstorm设置: 4 浏览器插件安装 4.1 chr ...
- Tweet信息搜集工具tinfoleak
Tweet信息搜集工具tinfoleak 推特是国外用户常用的社交网站.通过分析用户发布的推文以及社交活动,可以获取大量的个人信息.Kali Linux新增一款Tweet信息搜索工具tinfole ...
- Highcharts实现走势图
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.HighCh ...
- maven-surefire-plugin插件
https://sq.163yun.com/blog/article/173632756223238144 目前很多项目组的测试代码工程都是采用MAVEN+TESTNG的方式构造的. 因此测试代码pr ...
- [HDU3240]Counting Binary Trees(不互质同余除法)
Counting Binary Trees Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...