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.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jQuery实现动态操作table行
Nov 23 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
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
php数组键值用法实例分析
2015/02/27 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
表单内同名元素的控制
2006/11/22 Javascript
Javascript模块模式分析
2008/05/16 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
利用Python命令行传递实例化对象的方法
2016/11/02 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
详解python中index()、find()方法
2019/08/29 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
2014道德模范事迹材料
2014/02/16 职场文书
农村面貌改造提升实施方案
2014/03/18 职场文书
留学生求职信
2014/06/03 职场文书
学习张林森心得体会
2014/09/10 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
python基础详解之if循环语句
2021/04/24 Python
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
用Python创建简易网站图文教程
2021/06/11 Python