简单的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> ...
随机推荐
- im2uint8函数分析
环境:Win7 64位 + Matlab R2010a 本次分析的函数为im2uint8,这个函数在图像处理中要用到,主要把图像数据类转换到uint8 uint8函数有效的输入的图像数据类为:logi ...
- javascript在不同的浏览器处理事件
实现javascript事件处理兼容问题,例子如下,可以实现大部分浏览器处理事件的问题 var btn = document.getElementById("btn"); if(b ...
- 【solr基础教程之一】Solr相关知识点串讲
Solr是Apache Lucene的一个子项目.Lucene为全文搜索功能提供了完备的API,但它只作为一个API库存在,而不能直接用于搜索.因此,Solr基于Lucene构建了一个完 ...
- Python学习(五) Python数据类型:列表(重要)
列表: list是一组有序项目的数据结构. 列表是可变类型的数据,列表用[]进行表示,包含了多个以","分隔的项目. list=[] type(list) //<type ' ...
- LInux系统的C语言开发工具笔记
常用的C语言开发工具有很多,每个开发工具所支持的库函数和对标准的实现都有差异.对于初学者,选择一款使用广泛.上手容易的开发工具才是王道.在Windows 上很多从事C和C++开发的人员都选择VS作为开 ...
- C# 引用类型与值类型在编码上的区别
一.引入类型与值类型简介 值类型:直接存放于栈中,取的时候是直接取得值.值类型继承自System.ValueType.(自定义对象) 引用类型:存在于托管堆中,取的时候是从栈取该对象的地址,然后用这个 ...
- UESTC_Eight Puzzle 2015 UESTC Training for Search Algorithm & String<Problem F>
F - Eight Puzzle Time Limit: 3000/1000MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others) ...
- linux常用查看硬件设备信息命令(转载)
系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue ...
- python多线程同步
python多线程同步 作者:vpoet 日期:大约在夏季 import threading import time mylock = threading.RLock() num=0 class my ...
- SHDP--Working With HBase(一)之基本介绍
最近在做web项目使用到了Hadoop,HBase,在这里对Spring For Hadoop(SHDP)的使用做个总结,主要使用了SHDP中提供的一些封装好的HBase模块. Spring For ...