实现返回顶部效果,首先需要监听页面的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. RabbitMQ 声明队列时候的参数解释

    参考链接:http://www.rabbitmq.com/releases/rabbitmq-dotnet-client/v3.6.6/rabbitmq-dotnet-client-3.6.6-cli ...

  2. CF809E Surprise me!

    题解: 一道很套路的题目 首先一个结论 $\phi(xy)=\frac{\phi(x)*\phi(y)*gcd(x,y)}{\phi(gcd(x,y))}$ 这个按照$\phi$的定义很容易知道 然后 ...

  3. .net core 2.x - 发送邮件

    前言 我们知道目前 .NET Core 还不支持 SMTP 协议,当我么在使用到发送邮件功能的时候,需要借助于一些第三方组件来达到目的,今天给大家介绍两款开源的邮件发送组件,它们分别是 MailKit ...

  4. ansible playbook批量改ssh配置文件,远程用户Permission denied

    最近手里的数百台服务器需要改/etc/ssh/sshd_config的参数,禁止root直接登陆,也就是说 [root@t0 ~]# cat /etc/ssh/sshd_config | grep R ...

  5. PCA:利用PCA(四个主成分的贡献率就才达100%)降维提高测试集辛烷值含量预测准确度并《测试集辛烷值含量预测结果对比》—Jason niu

    load spectra; temp = randperm(size(NIR, 1)); P_train = NIR(temp(1:50),:); T_train = octane(temp(1:50 ...

  6. 动态规划——Frog Jump

    题目大意就是,给定一个数组,数组中数字从小到大排列,第一个元素一定是0,青蛙的初始位置就在0,后面依次从小到大排列,表示第几个石子,青蛙只有跳到最后一个石子上才算成功过河,而且青蛙第一次从0位置只能跳 ...

  7. [CF893F] Subtree Minimum Query

    Description: 给定一棵树,每次询问某点子树中到其不超过k的所有点的最小点权 强制在线 Hint: \(n,m\le 10^5\) Solution: 看到题目第一反应是以深度为下标,dfs ...

  8. vmware虚机 修改bios方法

    .vmx文件添加以下行,会在下次启动时自动出现bios,并会将"TRUE"改为“false” bios.forceSetupOnce = "TRUE"

  9. [POJ1193][NOI1999]内存分配(链表+模拟)

    题意 时 刻 T 内存占用情况 进程事件 0 1 2 3 4 5 6 7 8 9 进程A申请空间(M=3, P=10)<成功> 1 A 2 A B 进程B申请空间(M=4, P=3)< ...

  10. PHP序列号生成函数和字符串替换函数代码

    /** * 序列号生成器 */ function snMaker($pre = '') { $date = date('Ymd'); $rand = rand(1000000,9999999); $t ...