jQuery实现简单的回到顶部totop功能示例


Posted in jQuery onOctober 16, 2017

本文实例讲述了jQuery实现简单的回到顶部totop功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>回到顶部</title>
  <style type="text/css">
   body{
    width: 100%;
    height: 10000px;
   }
   #totop{
    width: 50px;
    height: 50px;
    line-height: 50px;
    background: magenta;
    font-size: 20px;
    position: fixed;
    right: 50px;
    bottom: 50px;
   }
  </style>
 </head>
 <body>
 </body>
 <script src="js/jquery-1.8.3.min.js" ></script>
 <script>
  //写在common.js文件中用来调用即可
  //1获取滚动条当前的位置
  function getScrollTop() {
   var scrollTop = 0;
   if (document.documentElement && document.documentElement.scrollTop) {
    scrollTop = document.documentElement.scrollTop;
   } else if (document.body) {
    scrollTop = document.body.scrollTop;
   }
   return scrollTop;
  };
  //2获取文档完整的高度
  function getScrollHeight() {
   return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
  };
  //3回到顶部
  function toTop(n) {
   $(window).on('scroll', function() {
    //console.log(getScrollTop()+"!"+getScrollHeight());
    if ($("#totop").size() > 0) {
     if (getScrollTop() < $(window).height() * n) {
      $("#totop").remove();
     }
    } else {
     if (getScrollTop() >= $(window).height() * n) {
      $("body").after("<div id='totop'>totop</div>");
      //插入了新标签 ,记得添加样式!
      $("#totop").on('click', function() {
       scroll(0,200);
      });
     }
    }
   });
  };
  //xxx.js文件来执行
  $(function(){
   toTop(2);
  })
 </script>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
jquery实现轮播图特效
Apr 12 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 #jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 #jQuery
jQuery响应滚动条事件功能示例
Oct 14 #jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 #jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 #jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 #jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 #jQuery
You might like
php上传文件问题汇总
2015/01/30 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
js 走马灯简单实例
2013/11/21 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
python中的迭代和可迭代对象代码示例
2017/12/27 Python
python如何实现一个刷网页小程序
2018/11/27 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
Python中的__init__作用是什么
2020/06/09 Python
详解KMP算法以及python如何实现
2020/09/18 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
班级读书活动总结
2014/06/30 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
税务会计岗位职责
2015/04/02 职场文书
面试通知短信
2015/04/20 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
运动会200米广播稿
2015/08/19 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
MySQL系列之二 多实例配置
2021/07/02 MySQL
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript