当前位置: 首页 > 编程笔记 >

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

刘英彦
2023-03-14
本文向大家介绍jQuery实现简单的回到顶部totop功能示例,包括了jQuery实现简单的回到顶部totop功能示例的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了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常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

 类似资料:
  • 本文向大家介绍jquery 实现返回顶部功能,包括了jquery 实现返回顶部功能的使用技巧和注意事项,需要的朋友参考一下 今天搞了一个回到顶部的JS JQ功能,废话不多说,有图有真相! 代码很简单,各位直接拿去,放在自己项目中即可,如有bug请给我留言,共同完善 方法二: 主要参数: scrollName: 'scrollUp', // Element ID topDistance: '300'

  • 本文向大家介绍jquery实现跳到底部,回到顶部效果的简单实例(类似锚),包括了jquery实现跳到底部,回到顶部效果的简单实例(类似锚)的使用技巧和注意事项,需要的朋友参考一下 实例如下: 以上这篇jquery实现跳到底部,回到顶部效果的简单实例(类似锚)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 本文向大家介绍jQuery实现回到顶部效果,包括了jQuery实现回到顶部效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jQuery实现回到顶部效果的具体代码,供大家参考,具体内容如下 动画:通过点击侧栏导航,页面到达相应的位置 jQuery方法:show(), hide(), animate() 动画效果: 代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家

  • 本文向大家介绍jQuery实现简单评论功能,包括了jQuery实现简单评论功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jQuery实现简单评论功能的具体代码,供大家参考,具体内容如下 例子: 效果: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍jQuery实现简单日期格式化功能示例,包括了jQuery实现简单日期格式化功能示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现简单日期格式化功能。分享给大家供大家参考,具体如下: 代码如下,引入jquery后直接后加入以下代码刷新可测试 运行结果如下: 更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery日期与时间操作技巧总结》、《jQ

  • 本文向大家介绍基于jQuery实现顶部导航栏功能,包括了基于jQuery实现顶部导航栏功能的使用技巧和注意事项,需要的朋友参考一下 今天给大家介绍一下,如何利用jQuery实现顶部导航栏功能。其实原理很简单就是利用css和JQuery样式选择器实现的。 下面举个例子具体介绍一下如何这些功能,案例如下: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。