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实现frame之间互通的方法
Jun 26 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 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
mysql+php分页类(已测)
2008/03/31 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
Python中格式化format()方法详解
2017/04/01 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
wxpython实现图书管理系统
2018/03/12 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
文秘应聘自荐书范文
2014/02/18 职场文书
运动会口号16字
2014/06/07 职场文书
2014年女职工工作总结
2014/11/27 职场文书
文案策划岗位职责
2015/02/11 职场文书
创业计划书之酒厂
2019/10/14 职场文书
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技
Go获取两个时区的时间差
2022/04/20 Golang