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 相关文章推荐
jquery实现图片平滑滚动详解
Mar 22 jQuery
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
jquery实现抽奖功能
Oct 22 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基础知识:类与对象(5) static
2006/12/13 PHP
php 一元分词算法
2009/11/30 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
javascript 特殊字符串
2009/02/25 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
python类参数self使用示例
2014/02/17 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
pandas实现导出数据的四种方式
2020/12/13 Python
小学生检讨书大全
2014/02/06 职场文书
材料员岗位职责
2014/03/13 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
高中课程设置方案
2014/05/28 职场文书
心理学专业求职信
2014/06/16 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python