$(function() { var scrollDiv = document.createElement('div'); $(scrollDiv).attr('id', 'toTop').html('^ 返回顶部').appendTo('body'); $(window)." />
当前位置:首页 > 日记 > 正文

jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]

jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]

jQuery脚本:

 <script type="text/javascript">     $(function() {       var scrollDiv = document.createElement('div');       $(scrollDiv).attr('id', 'toTop').html('^ 返回顶部').appendTo('body');       $(window).scroll(function() {         if ($(this).scrollTop() != 0) {           $('#toTop').fadeIn();         } else {           $('#toTop').fadeOut();         }       });       $('#toTop').click(function() {         $('body,html').animate({ scrollTop: 0 }, 800);       })     });   </script>

CSS样式:

<style type="text/css">     #toTop {       width: 100px;       z-index: 10;       border: 1px solid #333;       background: #121212;       text-align: center;      padding: 5px;      position: fixed;       bottom: 0px;       right: 0px;       cursor: pointer;      display: none;      color: #fff;       text-transform: lowercase;       font-size: 0.9em; }  </style>

带有iframe框架的滚动操作:

<script type="text/javascript"> <!--     $().ready(function() {       $('<div id="return_old_tips" class="btn_return_old" style="position:' + ($.browser.msie ? "absolute" : "fixed") + ';" onclick="return_old({$feedback_flag},\'{$current_url}\')">返回旧版</div>').appendTo($("body"));       if ($.browser.msie) {        $("#return_old_tips").css("top", 200);      }      if ($.browser.msie) {        top.document.body.onscroll = function() {          var f = 200 + (top.document.documentElement.scrollTop || top.document.body.scrollTop);          if (f > parseInt($("body").height(), 10)) {            f = parseInt($("body").height(), 10);          }           $("#return_old_tips").css({            top: f,            left: 0           });        }         top.document.body.onresize = top.document.body.onscroll;      } else {        $(window.parent.document).scroll(function() {           var f = 200 + (top.document.documentElement.scrollTop || top.document.body.scrollTop);          if (f > parseInt($("body").height(), 10)) {            f = parseInt($("body").height(), 10);          }          $("#return_old_tips").css({            top: f,             left: 0           });        }).resize(function() {           var f = 200 + (top.document.documentElement.scrollTop || top.document.body.scrollTop);           if (f > parseInt($("body").height(), 10)) {            f = parseInt($("body").height(), 10);          }          $("#return_old_tips").css({            top: f,             left: 0           });         });       }     }); //-->   </script>

以上所述是小编给大家介绍的jQuery实现返回顶部按钮和scroll滚动功能[带动画效果],希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

常用正则表达式匹配代码介绍

常用正则表达式匹配代码介绍

正则表达式,常用,代码,电脑软件,正则表达式,又称正规表示法、常规表示法。(英语:Regular Expression,在代码中常简写为regex、regexp或RE),计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则。在很多文本编辑器…

JavaScript判断输入是否为数字类型

JavaScript判断输入是否为数字类型

类型,输入,数字,方法,电脑软件,JavaScript判断输入是否为数字类型的方法总结前言很多时候需要判断一个输入是否位数字,下面简单列举集中方法。第一种方法 isNaNisNaN  返回一个 Boolean 值,指明提供的值是否是保留值 NaN (不是数字)。 NaN 即…

JS实现unicode和UTF-8之间的互相转

JS实现unicode和UTF-8之间的互相转

转换,电脑软件,JS,unicode,UTF,有一设备,为短信网关。需将PC送过来的UTF-8转换成UNICODE才能将内容通过短信发送出去,同样,接收到的短信为unicode编码,也许转换成UTF-8才能在PC端软件显示出来。程序很简单,只是走了不少弯路://unicode为1个接收…

vue.js利用Object.defineProperty

vue.js利用Object.defineProperty

双向绑定,电脑软件,js,vue,defineProperty,Object.defineProperty这个方法了不起啊,vue.js是通过它实现双向绑定的。。而且Object.observe也被草案发起人撤回了。。所以defineProperty更有必要了解一下了。几行代码看他怎么用var a= {}Objec…

word2013解决中文双引号变成英文的

word2013解决中文双引号变成英文的

中文,双引号,两种,英文,技巧,  Word2013经常在输入中文双引号时,前半个双引号还是是中文格式的双引号,但在后半个双引号时就变成了英文格式的双引号,如下图所示很不协调。那么下面就由小编给大家分享下word2013中解决中文双引号变成英文双引…

服务器选购十大术语解释

服务器选购十大术语解释

术语,解释,服务器,十大,电脑软件,  我们将对服务器选购时最令选购者产生困惑的10个概念 加以解释,希望能够对购买者以后的购买活动提供参考。1.企业(Enterprise):指任何大中小型公司(或者非赢利组织以及政府机关)。一般地,我们更频繁的使用…

PPT与Excel交互VBA法是什么

PPT与Excel交互VBA法是什么

交互,电脑软件,PPT,Excel,VBA,  PowerPoint和Office其他格式文件交换数据最好的方法是通过VBA,因为这句话,很多朋友来信询问用VBA如何实现PPT与Excel连接。以下是小编为您带来的关于PPT与Excel交互之VBA法,希望对您有所帮助。PPT与Excel交互…

IIS不支持APK文件下载的解决办法

IIS不支持APK文件下载的解决办法

文件下载,不支持,解决办法,电脑软件,IIS,将安卓android客户端程序.apk文件上传到网站上后,发现竟然无法下载。.apk就是安卓应用的后缀名,一般通过手机直接输入apk的网址,就可以下载。但是默认情况下,使用IIS作为Web服务器的网站无法下载apk文件…

javascript  删除select中的所有op

javascript 删除select中的所有op

删除,实例,电脑软件,javascript,option,javascript 删除select中的所有option的实例方法一:function DeleteOptions() { var obj = document.getElementsByTagName("select")[0]; var selectOptions = obj.options; var op…

iscroll动态加载数据完美解决方法

iscroll动态加载数据完美解决方法

动态加载,解决方法,数据,完美,电脑软件,本文实例为大家分享了iscroll动态加载数据的具体代码,供大家参考,具体内容如下<div id="wrapper" class="margin-b90"> <div id="scroller"> <div id="pullDown"> <span class=…

javascript 日期相减-在线教程 |

javascript 日期相减-在线教程 |

日期,代码,在线教程,相减,电脑软件,代码如下:<script LANGUAGE="JavaScript"> <!-- //说明:这里用了Math.ceil()函数,向上取整,即零头算一天,^_^ var strDate1 = "2003-06-17 03:03:40.0"; var strDate2 = "2004-09-18 12:03:12.0"; s…

关于JavaScript中forEach和each用

关于JavaScript中forEach和each用

电脑软件,JavaScript,forEach,本文主要给大家介绍了关于JavaScript中forEach和each的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍:forEach是ES5中操作数组的一种方法,主要功能是遍历数组,例如:var arr = [1,2,3,4];arr.fo…