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 23 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jQuery实现高级检索功能
May 28 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
php数组去重复数据示例
2014/02/25 PHP
php自定义hash函数实例
2015/05/05 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
vue实现简单全选和反选功能
2020/09/15 Javascript
django接入新浪微博OAuth的方法
2015/06/29 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
python文件与目录操作实例详解
2016/02/22 Python
python实现决策树分类算法
2017/12/21 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
办公室文秘岗位职责
2013/11/15 职场文书
物业保安员岗位职责
2014/03/14 职场文书
会员卡清退活动总结
2014/08/27 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
职工年度考核评语
2014/12/31 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
纪委立案决定书
2015/06/24 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python
Python Pygame实战之塔防游戏的实现
2022/03/17 Python