自定义置顶TOP按钮
简述一下,分为三个步骤:
1. 添加Html代码
2. 调整Css样式
3. 添加Jquery代码
具体代码如下:
<style type="text/css">
#GoTop{
width:40px;
height:40px;
background-color:#F59E1D;
position:fixed;
bottom:30px;
right:30px;
font-size:19pt;
text-align:center;
color:#FFF;
text-decoration:none;
}
</style>
<div>
<a id="GoTop" onclick="GoTopFunction()" href="javascript:void(0)">∧</a>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#GoTop").mouseenter(
function(){
$("#GoTop").css("color","#FFF");
$("#GoTop").css("background-color","#F3D117");
$("#GoTop").css("text-decoration","none");
}
);
$("#GoTop").mouseleave(
function(){
$("#GoTop").css("color","#FFF");
$("#GoTop").css("background-color","#F59E1D");
$("#GoTop").css("text-decoration","none");
}
);
});
var sth;
function GoTopFunction(){
FourLeafCloverZCVar=setInterval(GoTopFunctionEachScrollBy,10);
}
function GoTopFunctionEachScrollBy(eachHeight){
//判断是否存在以下两个实例
if(document.documentElement && document.documentElement.scrollTop)
{
if(document.documentElement.scrollTop<=0){
clearInterval(sth);
}else{
window.scrollBy(0,-25);
}
}else{
if(document.body.scrollTop<=0){
clearInterval(sth);
}else{
window.scrollBy(0,-25);
}
}
}
</script>
值得注意:
1. <a>标签中的javascript:void(0),平常见到的是href="#",而这不是,这里的意思大概可以理解不设置任何操作,即页面置顶后无需自动刷新界面。
2. 鼠标滑过事件:用mouseenter、mouseover还是mousemove?
hover是指分别当鼠标指针进入和离开元素时被执行的事件相当于mouseenter+mouseleave。
mouseover鼠标进入某个元素或其子元素时触发。
mousemove如你所说只要鼠标移动,哪怕只有1像素就会触发。
因为用户在浏览网页的过程中,鼠标是会不停移动的,所以一旦绑定这个事件,网页就会不停的执行mousemove所绑定的响应函数,消耗系统资源,这里的系统资源是指客户端的。
(可参考mouseover和mouseenter的区别:http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseenter_mouseover)
3. document.documentElement.scrollTop 具体解释可以看这里:http://blog.csdn.net/huang100qi/article/details/5950894
自定义置顶TOP按钮的更多相关文章
- Android自定义ScrollView实现一键置顶功能
效果图如下: (ps:动态图有太大了,上传不了,就给大家口述一下要实现的功能吧) 要实现的功能:当ScrollView向上滑动超过一定距离后,就渐变的出现一个置顶的按钮,当滑动距离小于我们指定的距离时 ...
- QQ好友列表向左滑动出现置顶、删除--第三方开源--SwipeMenuListView
SwipeMenuListView是在github上的第三方开源项目,该项目在github上的链接地址是:https://github.com/baoyongzhang/SwipeMenuListVi ...
- jQuery操作table数据上移、下移和置顶
jQuery 操作table中的tr换行的步骤如下: 1.获取当前tr var $tr = $(this).parents("tr"); 2.移动tr //上移 $tr.prev( ...
- 微信小程序 置顶/取消置顶
wxml <view wx:for="{{confirmlist}}" wx:for-item="confirm" wx:for-index=" ...
- vue 通过自定义指令实现 置顶操作;
项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令 ...
- Javascript笔记----实现Page页面右下角置顶按钮.
从用博客开始,发现博客园中很多博友的博客中在Page右下角都有个图标,不论屏幕怎么拉伸,都始终停留在右下角.点击后页面置顶.后面想想写一个Demo来实现这种效果吧. 一. 图标右下角固定. 1.SS ...
- UITableView设置Cell左滑多个按钮(编辑,删除,置顶等)
一.iOS7不支持cell多个按钮这个时候可以使用一个三方库JZTableViewRowAction,引用类扩展文件并实现其代理方法 JZTableViewRowAction下载地址:http://d ...
- Qt 窗口操作函数(置顶、全屏,最大化最小化按钮设置等)
一.窗口置顶 与 取消置顶 void MainWindow::on_windowTopButton_clicked() { if (m_flags == NULL) { m_flags = windo ...
- [置顶] Silverlight之控件应用总结(一)(3)
[置顶] Silverlight之控件应用总结(一)(3) 分类: 技术2012-04-02 20:35 2442人阅读 评论(1) 收藏 举报 silverlightradiobuttondatat ...
随机推荐
- Django 视图与网址进阶
一 .在网页上做加减法 1. 采用 /add/?a=4&b=5 这样GET方法进行 1 2 3 django-admin.py startproject zqxt_views cd zqxt_ ...
- Servlet异步上传文件
这里需要用到插件ajaxfileupload.js,jar包:commons-fileupload-1.3.2.jar,commons-io-2.5.jar 注意红色部分的字!!!! 1.创建一个we ...
- Mysql 数据库之常用命令[更新中...]
连接命令:mysql -h[主机地址] -u[用户名] -p[用户密码] 创建数据库:create database [库名] 例如:create database jtest; 显示所有数据库: s ...
- iOS用户信息单例的创建
UserInfo.h + (UserInfo *) sharedInstance; UserInfo.m #import "UserInfo.h" static UserInfo ...
- freebsd启动报错:My unqualified host name unkown...Sleeping for retry.
原文 http://blog.163.com/sujoe_2006/blog/static/335315120111158576591/ 病状:启动报"My unqualified host ...
- C和C++混合编程中的extern "C" {}
引言 在用C++的项目源码中,经常会不可避免的会看到下面的代码: 1 2 3 4 5 6 7 8 9 #ifdef __cplusplus extern "C" { #endif ...
- hive --service metastore 出现的问题
Could not create ServerSocket on address 0.0.0.0/0.0.0.0:9083 执行命令jps root@hadoopm:/usr# jps1763 Res ...
- GIT远程仓库地址变更
将VS2013的解决方案添加到GIT源代码管理后会增加.gitattributes和.gitignore 2个文件以及.git目录 设置远程地址的文件在.git目录下的config文件中 直接修改上图 ...
- Swift: 在Swift中桥接OC文件(自己创建的类文件、第三方库文件)
一.介绍 随着Swift的逐渐成熟,使用swift开发或者混合开发已经成为了一个趋势,本身苹果公司也十分推荐使用Swift这门新语言.目前Swift已经更新到了3.0,估计没有多久4.0就要出来了.那 ...
- 如何查看当前使用的Entity Framework版本
Visual Studio 中-----工具-----NuGet套件管理员-----套件管理器控制台-----输入Get-Package即可查看当前使用的版本信息