简单的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> ...
随机推荐
- NOIP前模板整理
图 最短路径 #include <queue> #define N 1000 typedef long long ll; using namespace std; int d[N], w[ ...
- [poj2762] Going from u to v or from v to u?(Kosaraju缩点+拓排)
转载请注明出处: http://www.cnblogs.com/fraud/ ——by fraud Going from u to v or from v to u? Tim ...
- css架构目标:预测,重用,扩展,维护
请参看下面链接: CSS架构目标:预测.重用.扩展.维护
- 读取xml文件转成List<T>对象的两种方法(附源码)
读取xml文件转成List<T>对象的两种方法(附源码) 读取xml文件,是项目中经常要用到的,所以就总结一下,最近项目中用到的读取xml文件并且转成List<T>对象的方法, ...
- Spring的PropertyPlaceholderConfigurer应用
Spring 利用PropertyPlaceholderConfigurer占位符 1. PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现,也就是BeanFa ...
- php过滤iphone的emoji表情
public static function removeEmoji($text) { $clean_text = ""; // Match Emoticons $regexEmo ...
- linux查看占用内存/cpu最高的进程情况
linux查看占用cpu最高的进程 ps aux|head -1;ps aux|grep -v PID|sort -rn -k +3|head 或者top (然后按下M,注意这里是大写) linux查 ...
- python - list, cllections模块的deque对象
list.count() list.pop()/list.pop(i) list.insert(i,element) list.sort()和sorted(list) list.reverse()和r ...
- 用Python写的简单脚本更新本地hosts
这两天Google墙得严重,于是就产生了做个一键更新hosts的脚本的想法. 由于正在学习Python,理所当然用Python来写这个脚本了. 接触比较多的就是urllib2这个库,习惯性的impor ...
- JSONP跨域的原理
一种脚本注入行为 在 2011年10月27日 那天写的 已经有 12671 次阅读了 感谢 参考或原文 服务器君一共花费了23.005 ms进行了2次数据库查询,努力地为您提供了这个页面. ...