js与jquery获取滚动条距浏览器顶部的距离 - Go语言中文社区

js与jquery获取滚动条距浏览器顶部的距离


最近在做项目的时候遇到需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小,在这儿做一个整理保存:

   一、jQuery获取的相关方法

Js代码  收藏代码
  1. jquery 获取滚动条高度  
  2.   
  3. 获取浏览器显示区域的高度 :   
  4. $(window).height();   
  5. 获取浏览器显示区域的宽度 :  
  6.   
  7. $(window).width();   
  8. 获取页面的文档高度 :  
  9. $(document).height();   
  10. 获取页面的文档宽度 :$(document).width();  
  11.   
  12. 获取滚动条到顶部的垂直高度 :  
  13.   
  14. $(document).scrollTop();   
  15. 获取滚动条到左边的垂直宽度 :  
  16.   
  17. $(document).scrollLeft();  
  18.   
  19. 计算元素位置和偏移量:  
  20.   
  21. $(id).offset();  
  22.   
  23. offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。  
  24.   
  25. offset(options, results)  
  26. options.relativeTo  指定相对计  
  27. 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。  
  28. options.scroll  是否把  
  29. 滚动条计算在内,默认TRUE  
  30. options.padding  是否把padding计算在内,默认false  
  31. options.margin  
  32.   是否把margin计算在内,默认true  
  33. options.border  是否把边框计算在内,默认true  
  34.   
  35.    

 但是我在使用jQuery的方法的时候在IE6上会发生不兼容现象。

 

  二、使用js获取的相关方法

 

Js代码  收藏代码
  1. //回到页面顶部  
  2.     $("#goTotop").click(function(){  
  3.         $('body,html').animate({scrollTop:0},1500); //点击按钮让其回到页面顶部  
  4.     });  
  5.       
  6.     $(window).scroll(function() {  
  7.         var yheight1=window.pageYOffset; //滚动条距顶端的距离  
  8.         var yheight=getScrollTop(); //滚动条距顶端的距离  
  9.         var height =document.documentElement.clientHeight//浏览器可视化窗口的大小  
  10.         var top=parseInt(yheight)+parseInt(height)-217;  
  11.         var divobj=$(".kf");  
  12.         divobj.attr('style','top:'+top+'px;');  
  13.     })  
  14.       
  15. /** 
  16.  * 获取滚动条距离顶端的距离 
  17.  * @return {}支持IE6 
  18.  */  
  19. function getScrollTop() {  
  20.         var scrollPos;  
  21.         if (window.pageYOffset) {  
  22.         scrollPos = window.pageYOffset; }  
  23.         else if (document.compatMode && document.compatMode != 'BackCompat')  
  24.         { scrollPos = document.documentElement.scrollTop; }  
  25.         else if (document.body) { scrollPos = document.body.scrollTop; }   
  26.         return scrollPos;   
  27. }  

 getScrollTop()使用这个方法在IE、谷歌和火狐上都能获取,当然这不是我原创的,也是有哥们贴网上的,我只是在此收藏整理一下。

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/sunny327/article/details/47416439
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2020-03-01 21:34:01
  • 阅读 ( 1002 )
  • 分类:前端

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢