实现返回顶部效果,首先需要监听页面的scroll事件,其次才是获取到页面当前的滚动高度

$(window).scrollTop();

具体代码如下:

jquery获取页面元素的一些边界值(宽,高,滚动高度......)总结:

1.$(window).height();                                  浏览器可是区域的高度

2.$(window).width();                                    浏览器可视区域的宽度

3.$(document).height();                获取文档文档的高度

4.$(document).width();                 获取文档文档的宽度

5.$(body,html).height();           获取文档body的高度

6.$(body,html).width();                                 获取文档body的宽度

7.$(document).scrollTop();                           获取滚动条到顶部的垂直高度

8.$(document).scrollLeft();                           获取滚动条到左边的垂直宽度

9.$(obj).width();                                            获取或设置元素的宽度

10.$(obj).height();                                         获取或设置元素的高度

11.obj.offset().top;                                         某个元素的上边界到body最顶部的距离

12.obj.offset().left;                                         某个元素的左边界到body最左边的距离

使用jquery实现返回顶部按钮的更多相关文章

  1. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a  ...

  2. javascript+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...

  3. jquery右下角返回顶部

    实现的效果也就是,当有滚动条是,滚动条未动或与顶部距离小于多少像素是,返回顶部按钮处于隐身状态,当滚动条与顶部距离大于一定像素时,返回顶部按钮出现,实现点击‘返回按钮’后,从当前位置回到等不位置.要先 ...

  4. 使用jQuery实现返回顶部功能

    <p id="back-to-top"><a href="#top"><span></span>返回顶部< ...

  5. 一句jQuery代码返回顶部

    一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...

  6. jQuery实现返回顶部

    由于项目需要,写了个返回顶部的小功能... /*返回顶部*/ function toTop() { $(".to_top").hide(); $(window).scroll(fu ...

  7. 【Android】ListView监听上下滑动(判断是否显示返回顶部按钮

    设置滚动监听判断ListView的滚动方向同时获取屏幕高度.ListView实际高度,判断是否需要展示返回顶部按钮 package com.zihao.activity;   import java. ...

  8. JQuery 实现返回顶部效果

    首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...

  9. UWP 返回顶部按钮

    返回顶部的按钮,like this 当用户下滑了一定的距离之后,通常是快滑倒底部的时候,出现返回顶部按钮,当用户向上快滑,滑到顶部的时候,返回顶部按钮自动消失. 在UWP中,用来滚动内容的控件是Scr ...

随机推荐

  1. nginx windows could not build server_names_hash, you should increase server_names_hash_bucket_size: 32

    nginx 为windows版本 在配置文件nginx.conf 的http{}段增加一行配置 server_names_hash_bucket_size 64; 如果64不够可以设128等

  2. VMware启动时提示我已移动或我已复制该虚拟机

    参考地址:https://blog.csdn.net/luxiangzhou/article/details/79626113 1.VMware启动时提示“我已移动该虚拟机”或“我已复制该虚拟机”,选 ...

  3. unity Camera第一人称移动,3中方法实现

    using System.Collections; using System.Collections.Generic; using UnityEngine; public class Player : ...

  4. UOJ#206. 【APIO2016】Gap 构造 交互题

    原文链接www.cnblogs.com/zhouzhendong/p/UOJ206.html 题解 T = 1 的情况直接大力从两边向中间询问即可. T = 2 的情况挺妙的,我没想到. 考虑首先花费 ...

  5. python copy模块

    python copy模块 copy模块用于对象的拷贝操作 该模块只提供了两个主要的方法: copy.copy:浅复制 copy.deepcopy:深复制 直接赋值,深拷贝和浅拷贝的区别 直接赋值:简 ...

  6. Linux之环境搭建(一)

    四大系统比较 Mac OS是苹果机专用系统,是基于Unix内核的图形化操作系统,因此Unix相当于父亲,Linux和Mac OS是对兄弟. CentOS是从Redhat源代码编译重新发布版.CentO ...

  7. 蓝桥杯刷题,第四界省赛B组

    题头,本内容的题目和部分内容均来自博客:https://blog.csdn.net/ryo_218/article/details/79704030 ,在此感谢. 1. 题目标题:高斯日记大数学家高斯 ...

  8. [ubuntu]apt-get update突然出现arm package找不到

    https://blog.csdn.net/l741299292/article/details/69671789

  9. java中的异常(一)

    java异常的概念 执行期的错误(javac xxx.java) 运行期的错误(java xxx) 这里讲的是运行期出现的错误 class TestEx { public static void ma ...

  10. IIS 程序池与Site 导出、导入

    如何在IIS7或IIS7.5中导入导出站点及应用程序池. 为实现负载平衡,我们可能会使用多个WEB服务器,也就会需要给多个IIS配置同样的站点和应用程序池.那么我们需要一个一个的重新建吗?当然不用,我 ...