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实现放大镜简洁代码(推荐)
Jun 08 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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 mvc开发模式的感想
2011/06/28 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
js类的静态属性和实例属性的理解
2009/10/01 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
自动化专业个人求职信范文
2013/11/29 职场文书
就业协议书的作用
2014/04/11 职场文书
村居抓节水倡议书
2014/05/19 职场文书
交通安全教育主题班会
2015/08/12 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
解析MySQL binlog
2021/06/11 MySQL