一个最简单的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返回顶部的更多相关文章

  1. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a  ...

  2. JQuery 实现返回顶部效果

    首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...

  3. javascript+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...

  4. 一句jQuery代码返回顶部

    一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...

  5. 转载:jQuery实现返回顶部功能

    转自:http://blog.csdn.net/itmyhome1990/article/details/25340705 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图   ...

  6. jQuery实现返回顶部功能

    整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图               第一种实现 一.JSP或HTML(主体结构) 在body中添加 <body id=" ...

  7. 使用jquery实现返回顶部按钮

    实现返回顶部效果,首先需要监听页面的scroll事件,其次才是获取到页面当前的滚动高度 $(window).scrollTop(); 具体代码如下: jquery获取页面元素的一些边界值(宽,高,滚动 ...

  8. 使用jQuery实现返回顶部功能

    <p id="back-to-top"><a href="#top"><span></span>返回顶部< ...

  9. 【JavaScript&jQuery】返回顶部

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. im2uint8函数分析

    环境:Win7 64位 + Matlab R2010a 本次分析的函数为im2uint8,这个函数在图像处理中要用到,主要把图像数据类转换到uint8 uint8函数有效的输入的图像数据类为:logi ...

  2. javascript在不同的浏览器处理事件

    实现javascript事件处理兼容问题,例子如下,可以实现大部分浏览器处理事件的问题 var btn = document.getElementById("btn"); if(b ...

  3. 【solr基础教程之一】Solr相关知识点串讲

           Solr是Apache Lucene的一个子项目.Lucene为全文搜索功能提供了完备的API,但它只作为一个API库存在,而不能直接用于搜索.因此,Solr基于Lucene构建了一个完 ...

  4. Python学习(五) Python数据类型:列表(重要)

    列表: list是一组有序项目的数据结构. 列表是可变类型的数据,列表用[]进行表示,包含了多个以","分隔的项目. list=[] type(list) //<type ' ...

  5. LInux系统的C语言开发工具笔记

    常用的C语言开发工具有很多,每个开发工具所支持的库函数和对标准的实现都有差异.对于初学者,选择一款使用广泛.上手容易的开发工具才是王道.在Windows 上很多从事C和C++开发的人员都选择VS作为开 ...

  6. C# 引用类型与值类型在编码上的区别

    一.引入类型与值类型简介 值类型:直接存放于栈中,取的时候是直接取得值.值类型继承自System.ValueType.(自定义对象) 引用类型:存在于托管堆中,取的时候是从栈取该对象的地址,然后用这个 ...

  7. 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) ...

  8. linux常用查看硬件设备信息命令(转载)

    系统 # uname -a                                       # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue         ...

  9. python多线程同步

    python多线程同步 作者:vpoet 日期:大约在夏季 import threading import time mylock = threading.RLock() num=0 class my ...

  10. SHDP--Working With HBase(一)之基本介绍

    最近在做web项目使用到了Hadoop,HBase,在这里对Spring For Hadoop(SHDP)的使用做个总结,主要使用了SHDP中提供的一些封装好的HBase模块. Spring For ...