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


Posted in jQuery onJuly 05, 2017

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滚动功能[带动画效果],希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
如何编写jquery插件
Mar 29 jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jquery实现点击左右按钮切换图片
Jan 27 jQuery
jquery插件实现悬浮的菜单
Apr 24 jQuery
jquery拖动改变div大小
Jul 04 #jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 #jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 #jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery简介_动力节点Java学院整理
Jul 04 #jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 #jQuery
You might like
php xml文件操作代码(一)
2009/03/20 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
javascript 闭包疑问
2010/12/30 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
12月红领巾广播稿
2014/02/13 职场文书
保险公司早会主持词
2014/03/22 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
《谁的本领大》教后反思
2014/04/25 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年科协工作总结
2014/12/09 职场文书
刘公岛导游词
2015/02/05 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL