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中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
如何在vue 中引入使用jquery
Nov 10 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图片上传程序
2008/03/27 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
php 数据结构之链表队列
2017/10/17 PHP
PHP实现的日历功能示例
2018/09/01 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
python实现图片压缩代码实例
2019/08/12 Python
python中web框架的自定义创建
2019/09/08 Python
python求前n个阶乘的和实例
2020/04/02 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
服装行业创业计划书范文
2014/02/05 职场文书
十八大感想感言
2014/02/10 职场文书
学校体育节班级口号
2015/12/25 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers