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.无参数的方法调用. 大家注意了,这个版本不能 ...
随机推荐
- 【hdoj_2566】统计硬币(母函数？)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=2566 本题可以借鉴母函数(组合数学)的思想. 题目可以这样理解:给一堆硬币,分别有1,2,5元的各无数个, ...
- pandas 数据结构的基本功能
操作Series和DataFrame中的数据的常用方法: 导入python库: import numpy as np import pandas as pd 测试的数据结构: Series: > ...
- 洛谷 P1202 [USACO1.1]黑色星期五Friday the Thirteenth 题解
题目传送门 这道题暴力就能解决. #include<bits/stdc++.h> using namespace std; int xi; ,ans[]; int main() { int ...
- AC日记——#2054. 「TJOI / HEOI2016」树
#2054. 「TJOI / HEOI2016」树 思路: 线段树: 代码: #include <cstdio> #include <cstring> #include < ...
- Rookey.Frame v1.0快速开发平台－用户登录
上一次介绍的了Rookey.Frame v1.0快速开发平台的整体功能,接下来会对各个功能点进行解析说明,今天给大家介绍下系统登录功能. 用户登录 系统中基本上所有功能页面都是从后台代码拼接后返回的, ...
- Java学习笔记之：Java Servlet环境配置
一.介绍 Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层. 使用 ...
- thinkphp5.0配置加载
ThinkPHP支持多种格式的配置格式,但最终都是解析为PHP数组的方式. PHP数组定义 返回PHP数组的方式是默认的配置定义格式,例如: //项目配置文件 return [ // 默认模块名 'd ...
- 查看Android手机数据库
有的时候,手机没有root,无法查看数据库,甚不方便,好在Github上有解决方案: Github地址:https://github.com/king1039/Android-Debug-Databa ...
- [转]SharePoint 2010 Powershell Feature Cmdlets
In this installment its time to look at the various cmdlets that have to do with Features. Of course ...
- 应用程序首选项(application preference)及数据存储
应用程序首选项(application preference)用来存储用户设置,考虑以下案例: a. 假设有一款MP3播放器程序,当用户调节了音量,当下次运行该程序时,可能希望保持上一次调节的音量值. ...