一个最简单的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. http://python3-cookbook.readthedocs.io/zh_CN/latest/c14/p01_testing_output_sent_to_stdout.html

    http://python3-cookbook.readthedocs.io/zh_CN/latest/c14/p01_testing_output_sent_to_stdout.html draw. ...

  2. PHP函数参数的引用传递和值传递

    函数的参数传递有两种方式 1,值传递 常见的 test($param)  方式就是值传递,在函数内部修改$param,不会影响外部变量$param的值 2,引用传递 参数是引用传递的方式,此时函数内部 ...

  3. Java反射机制简单使用

    1.Java反射相关类所在package: java.lang.reflect.* 2.开始使用Reflection: 使用reflect相关类,遵循三个步骤: a.获取想要操作类的 java.lan ...

  4. php 数组Array 删除指定键名值

    if(array_key_exists('keyname',$array)){ //检查数组中此键名是否存在: unset($array['keyname']); //删除后位置仍然保留,但清空了键名 ...

  5. DOM和jQuery

    一.DOM 在学习DOM之前你应该已经具备了以下三个知识点的应用:HTML CSS javascript DOM 是 W3C(万维网联盟)的标准. W3C DOM 标准被分为 3 个不同的部分: 核心 ...

  6. gcc编译通过,运行却显示“段错误”的解决方法

    ​第一次在Liunx上(liunx mint 17)使用gcc编译c文件,竟然提示“找不到stdio.h",经过google后发现执行 sudo apt-get install build- ...

  7. DOS命令行 定时关机&取消定时关机

      命令行关机命令----shutdown   Windows XP的关机是由Shutdown.exe程序来控制的,位于Windows\System32文件夹中.   如果你输入"shutd ...

  8. perl 爬取csdn

    <pre name="code" class="python">use LWP::UserAgent; use POSIX; use HTML::T ...

  9. 添加python第三方插件时出现的问题

    当我安装beautifulsoup4时出现了如下错误: Fatal error in launcher: Unable to create process using '""F:\ ...

  10. 【LeetCode练习题】Combination Sum

    Combination Sum Given a set of candidate numbers (C) and a target number (T), find all unique combin ...