<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>返回顶部</title>

    <script src="scripts/jquery-1.7.1.min.js"></script>

</head>

<body>

<script type="text/javascript">

$(function(){

var toppos = 0;

$(".back_top_index").hide();

$(document).scroll(

  function(){

    toppos=$(document).scrollTop();

    var oClient =$(window).height();//当前窗口可视区域高度

    if(toppos>oClient){

      $(".back_top_index").fadeIn();

    }else if(toppos==0){

      $(".back_top_index").fadeOut();

    }

  }

)

$(".back_top_index").click(function(){

    $("html,body").animate({scrollTop:0})

  })

})

</script>

<div style="height:2000px;">3423424</div>

<div class="back_top_index">1</div>

<style>

.back_top_index{width: 50px;height: 50px;position: fixed;bottom: 10px;right: 10px;background-color: red;}

</style>

</body>

</html>

jQuery 返回顶部效果的更多相关文章

  1. JQuery 实现返回顶部效果

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

  2. jquery返回顶部，支持手机

    jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...

  3. jQuery返回顶部实用插件YesTop

    只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...

  4. jQuery返回顶部（精简版）

    jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  5. jq-animate实现返回顶部效果

    jq-animate实现返回顶部效果: <!doctype html> <html lang="en"> <head> <meta cha ...

  6. WEB返回顶部效果

    1. PC端页面返回顶部效果 1 $( window ).scroll(function(){ 2 if( $( window ).scrollTop() > 500 ){ // 当顶部的滚动距 ...

  7. JavaScript实现返回顶部效果

    仿淘宝回到顶部效果 需求:当滚动条到一定位置时侧边栏固定在某个位置,再往下滑动到某一位置时显示回到顶部按钮.点击按钮后页面会动态滑到顶部,速度由快到慢向上滑. 思路: 1.页面加载完毕才能执行js代码 ...

  8. 简约的返回顶部效果（jQuery）

    博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改. 一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一 ...

  9. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...

随机推荐

  1. java实现io读取数据

    ServletInputStream inputStream = request.getInputStream(); BufferedReader br = new BufferedReader(ne ...

  2. 一步一步学Silverlight 2系列（2）：基本控件

    述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  3. 专用于ASP.Net Web应用程序的日期控件

     原文引入:http://blog.csdn.net/nileel/article/details/1566051 专用于ASP.Net Web应用程序的日期控件 分类: ASP.NET/C#2007 ...

  4. Hibernate是如何延迟加载的

    Hibernate是如何延迟加载的 2011-12-24 13:58 242人阅读 评论(0) 收藏 举报 hibernatespringinterceptordao数据库integer Hibern ...

  5. BZOJ_4199_[Noi2015]品酒大会_后缀自动机

    BZOJ_4199_[Noi2015]品酒大会_后缀自动机 Description 一年一度的“幻影阁夏日品酒大会”隆重开幕了.大会包含品尝和趣味挑战两个环节,分别向优胜者颁发“首席品 酒家”和“首席 ...

  6. P4844 LJJ爱数数 数论

    思路: 化简后得到(a+b)c=ab,设g=(a,b),A=a/g,B=b/g,则g(A+B)c=ABg^2,即(A+B)c=ABg 由题目已知条件:(a,b,c)=1,即(g,c)=1,g|(A+B ...

  7. 转载：百为STM32开发板教程之十一——NOR FLASH

    转载:http://bbs.21ic.com/icview-586199-1-1.html 百为STM32开发板教程之十一——NOR FLASH 参考文档:百为stm32开发板光盘\st官方参考资料\ ...

  8. 分布式缓存一致性hash算法

    当服务器不多,并且不考虑扩容的时候,可直接使用简单的路由算法,用服务器数除缓存数据KEY的hash值,余数作为服务器下标即可. 但是当业务发展,网站缓存服务需要扩容时就会出现问题,比如3台缓存服务器要 ...

  9. 一个简单的Viewport效果

    <script src="../ext-4.2/bootstrap.js" type="text/javascript"></script&g ...

  10. HDU 4891 The Great Pan (题意题+模拟)

    题意:给定一个文章,问你有多少种读法,计算方法有两种,如果在$中,如果有多个空格就算n+1,如果是一个就算2的次方,如果在{}中, 那么就是把每个空格数乘起来. 析:直接模拟,每次计算一行,注意上一行 ...