简单的JQuery top返回顶部
一个最简单的JQuery Top返回的代码,Mark一下:
HTML如下:
<div id="backtop">
<a href="javascript:;">TOP</a>
</div>
CSS样式:(随意修改样式)
#backtop{
display: none;
position: fixed;
right: 50px;
bottom: 110px;
}
#backtop a{
display: block;
padding: 10px 5px;
background:#59b524;
color: #fff;
font-size: 16px;
font-weight: bold;
}
#backtop a:hover{ background:#439b11; }
最关键的来了,JQuery如下:
$(function(){
//当滚动条的位置大于距顶部0像素时,跳转链接出现,否则消失
$(function () {
$(window).scroll(function(){
if ( $(window).scrollTop()>0){
$("#backtop").fadeIn(1200);
}
else
{
$("#backtop").fadeOut(1200);
}
});
//当点击跳转链接后,回到页面顶部位置
$("#backtop a").click(function(){
$('body,html').animate({scrollTop:0},800);
return false;
});
});
});
OK。搞定!
简单的JQuery top返回顶部的更多相关文章
- js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- JQuery 实现返回顶部效果
首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...
- javascript+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- 一句jQuery代码返回顶部
一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...
- 转载:jQuery实现返回顶部功能
转自:http://blog.csdn.net/itmyhome1990/article/details/25340705 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图 ...
- jQuery实现返回顶部功能
整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图 第一种实现 一.JSP或HTML(主体结构) 在body中添加 <body id=" ...
- 使用jquery实现返回顶部按钮
实现返回顶部效果,首先需要监听页面的scroll事件,其次才是获取到页面当前的滚动高度 $(window).scrollTop(); 具体代码如下: jquery获取页面元素的一些边界值(宽,高,滚动 ...
- 使用jQuery实现返回顶部功能
<p id="back-to-top"><a href="#top"><span></span>返回顶部< ...
- 【JavaScript&jQuery】返回顶部
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- (原)下载pubFig的python代码
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5715305.html pubFig数据库网址: http://www.cs.columbia.edu/ ...
- Hadoop常见异常及其解决方案
1.Shell$ExitCodeException 现象:运行hadoop job时出现如下异常: 14/07/09 14:42:50 INFO mapreduce.Job: Task Id : at ...
- jQuery模糊选择
属性字头选择器(Attribute Contains Prefix Selector) jQuery 属性字头选择器的使用格式是 jQuery(‘[attribute|=value]‘) ,例如 jQ ...
- phpexcel导入excel文件报the filename xxx is not recognised as an OLE file错误。
工作中频繁会用phpexcel类导入excel文件的数据到数据库,目前常用的excel文件格式有:xls.csv.xlsx. 刚开始,针对xls文件,使用如下程序,能正常运行: $objReader ...
- [C++程序设计]有默认参数的函数
实参与形参的结合是从左至右顺序进行的.因此指定默认值的参数必须放在形参表列中的最右端,否 则出错.例如: void f1(float a,int b=0,int c,char d=′a′); //不正 ...
- shell之rm -rf的别名设置
vim ~/.bashrc alias rm='read -p "Are you ready?" y && [ $y == "y" ] & ...
- x位全排列(next_permutation)
擅长排列的小明 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 小明十分聪明,而且十分擅长排列计算.比如给小明一个数字5,他能立刻给出1-5按字典序的全排列,如果你想 ...
- 串口WIF简单调试
/*********************************************************************** Title:Wifi串口调试 Hardware: Wi ...
- 关于STM32工程的错误,狗血错误。。。..\CMSIS\core_cm3.h(1087): error: #20: identifier "IRQn_Type" is undefined
这件事还是要写一篇博客了,为了后来的人不换致命性的错误 辛辛苦苦写的一个四个不同的引脚不同时钟不同寄存器分别产生四种不同占空比不同周期的信号方波程序超级经典 PS:页尾上传PWM波形产生工程附件供大 ...
- Socket也有专门的Unicode版本
https://www.chilkatsoft.com/refdoc/wcppCkSocketWRef.html https://www.chilkatsoft.com/refdoc/vcCkSock ...