<style>
p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; }
p#back-to-top a{ text-align:center; text-decoration:none; color:#d1d1d1; display:block; width:30px;
/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
transition:color 1s; -moz-transition:color 1s;
-webkit-transition:color 1s;
-o-transition:color 1s;}
p#back-to-top a span{
background:url(images/ico.jpg) no-repeat; display:block;height:30px; width:30px;margin-bottom:5px;
/*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
transition:background 1s; -moz-transition:background 1s;-webkit-transition:background 1s;-o-transition:background 1s;}
</style>
 <div style="width: 100%; height: 3000px;"></div>
<p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$(window).scroll(function(){
if($(window).scrollTop()>=100){
$("#back-to-top").fadeIn(1500); //缓慢的将段落淡入
}
else{
$("#back-to-top").fadeOut(1500); //缓慢的将段落淡出
}
})
$("#back-to-top").click(function(){
$('body.html').animate({scrollTop},1000);
return false;
})
})
</script>

jquery返回顶部特效的更多相关文章

  1. jquery返回顶部,支持手机

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

  2. JavaScript返回顶部特效

    样式: <style type="text/css"> /*返回顶部特效*/ a { border: none; text-decoration: none; outl ...

  3. jQuery返回顶部(精简版)

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

  4. 【转】用jquery编写动态的返回顶部特效

    jquery代码: function gotoTop(min_height){ //预定义返回顶部的html代码,它的css样式默认为不显示 var gotoTop_html = '<div i ...

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

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

  6. jquery返回顶部和底部插件和解决ie6下fixed插件

    (function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { &quo ...

  7. Jquery返回顶部插件

    自己jquery开发的返回顶部,当时只为了自己用一下,为了方便,修改成了插件... 自己的博客现在用的也是这个插件..使用方便!! <!DOCTYPE html> <html> ...

  8. jquery 返回顶部 兼容web移动

    返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...

  9. jquery返回顶部

    // 返回顶部 var fixed_totop = $('.back_top').on('click',function(){ $('html, body').animate({scrollTop: ...

随机推荐

  1. 高级I/O之非阻塞I/O

    http://www.cnblogs.com/nufangrensheng/p/3515035.html中曾将系统调用分成“低速”系统调用和其他系统调用两类.低速系统调用是可能会使进程永远阻塞的一类系 ...

  2. Spring与Hibernate、Mybatis整合

    在Web项目中一般会把各个web框架结合在一起使用,比如spring+hibernate,spring+ibatis等,如此以来将其他的框架整合到spring中来,便有些少许的不便,当然spring已 ...

  3. html中input type=file 改变样式

    <style> #uploadImg{ font-size:12px; overflow:hidden; position:absolute} #file{ position:absolu ...

  4. WIN7 X64 如何运行debug

    WIN7 X64 如何运行debug 下载debug.exe 安装dosbox 安装完成后将debug.exe放入某个盘的根目录下(以c盘为例) 然后运行dosbox,输入 mount c c:\ c ...

  5. HDU 1016 Prime Ring Problem (DFS)

    Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  6. LeetCode 61

    Rotate List Given a list, rotate the list to the right by k places, where k is non-negative. For exa ...

  7. CSS3如何实现2D转换和3D转换,他们有何区别

    CSS3中2D3D技术的发展,带来了更丰富的视觉效果~他们的实现机理是怎样的呢? 1定义 2D: 能够对元素进行移动,缩放,转动,拉长或拉伸. 3D: 允许对元素进行格式化,在三维空间进行操作.元素改 ...

  8. spark集成hive遭遇mysql check失败的问题

    问题: spark集成hive,启动spark-shell或者spark-sql的时候,报错: INFO MetaStoreDirectSql: MySQL check failed, assumin ...

  9. Unity3d发布错误:could not allocate memery:system out of memery!

    可能出现的原因: 1.项目太大了2.项目坏了3.资源坏了4.单个资源定点数超了e.   解决办法:删除了一些模型.是模型太大,面数.顶点数太多的原因.   Unity3d里查看模型的顶点数 展开fbx ...

  10. ViewPager的基本使用--可左右循环切换也可自动切换

    ViewPager也算是Android自带的常用控件之一,但是有可能会无法直接调用,所以只需要将工程目录里/libs/android-support-v4.jar该jarAdd to Build Pa ...