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自定义图片上传插件实例代码
Apr 04 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery实现全选按钮
Jan 01 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操作Redis常用技巧总结
2018/04/24 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
用JS实现选项卡
2020/03/23 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
python中logging包的使用总结
2018/02/28 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
python-str,list,set间的转换实例
2018/06/27 Python
Python unittest单元测试框架总结
2018/09/08 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
Python with标签使用方法解析
2020/01/17 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
pandas分组聚合详解
2020/04/10 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
安全生产管理责任书
2014/04/16 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
实习生工作证明范本
2014/09/14 职场文书
校车司机安全责任书
2015/05/11 职场文书
2016年少先队活动总结
2016/04/06 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python