`
西北小强
  • 浏览: 344806 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js获取浏览器滚动条距离顶端的距离

阅读更多

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

   一、jQuery获取的相关方法

jquery 获取滚动条高度

获取浏览器显示区域的高度 : 
$(window).height(); 
获取浏览器显示区域的宽度 :

$(window).width(); 
获取页面的文档高度 :
$(document).height(); 
获取页面的文档宽度 :$(document).width();

获取滚动条到顶部的垂直高度 :

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

$(document).scrollLeft();

计算元素位置和偏移量:

$(id).offset();

offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。

offset(options, results)
options.relativeTo  指定相对计
算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll  是否把
滚动条计算在内,默认TRUE
options.padding  是否把padding计算在内,默认false
options.margin
  是否把margin计算在内,默认true
options.border  是否把边框计算在内,默认true

 

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

 

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

 

//回到页面顶部
	$("#goTotop").click(function(){
		$('body,html').animate({scrollTop:0},1500); //点击按钮让其回到页面顶部
	});
	
	$(window).scroll(function() {
		var yheight1=window.pageYOffset; //滚动条距顶端的距离
		var yheight=getScrollTop(); //滚动条距顶端的距离
		var height =document.documentElement.clientHeight//浏览器可视化窗口的大小
		var top=parseInt(yheight)+parseInt(height)-217;
		var divobj=$(".kf");
		divobj.attr('style','top:'+top+'px;');
	})
	
/**
 * 获取滚动条距离顶端的距离
 * @return {}支持IE6
 */
function getScrollTop() {
		var scrollPos;
		if (window.pageYOffset) {
		scrollPos = window.pageYOffset; }
		else if (document.compatMode && document.compatMode != 'BackCompat')
		{ scrollPos = document.documentElement.scrollTop; }
		else if (document.body) { scrollPos = document.body.scrollTop; } 
		return scrollPos; 
}

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

 

分享到:
评论

相关推荐

    【JavaScript源代码】JavaScript 获取滚动条位置并将页面滑动到锚点.docx

    ### JavaScript 获取滚动条位置并将页面滑动到锚点 #### 前言 在现代Web应用开发中,尤其是在移动端的应用场景下,用户交互体验尤为重要。其中一项常见的需求就是实现页面内的快速定位,即通常所说的“锚点”功能...

    js jquery 获取某一元素到浏览器顶端的距离实现方法

    在JavaScript和jQuery的世界里,有时候我们需要获取页面上特定元素相对于浏览器视口的位置,例如获取某个元素到浏览器顶端的距离。这在实现滚动效果、定位导航或者响应式设计时非常有用。本篇文章将详细介绍如何使用...

    JS浏览器的高度和宽度

    ### JS 获取浏览器的高度和宽度详解 在Web开发中,经常需要获取浏览器的尺寸信息以便进行适配或调整页面布局。JavaScript 提供了多种方法来获取这些信息,不同的浏览器可能使用不同的属性来达到相同的目的。本篇...

    Js与Jq获取浏览器和对象值的方法

    `obj.scrollLeft` 和 `obj.scrollTop` 可以设置或获取元素左端和顶端的滚动距离。jQuery中也有类似的属性,如 `obj.offset().left` 和 `obj.offset().top` 获取元素相对于整个文档的位置,`obj.scrollLeft()` 和 `...

    js获取浏览器和屏幕的各种宽度高度

    通过以上方法,我们可以在不同浏览器环境下获取到浏览器窗口的可视区域宽度和高度、网页内容的实际宽度和高度以及滚动条包含在内的宽度和高度,并且可以获取到页面滚动偏移量等信息。这些操作对于前端开发者来说是...

    js获取屏幕分辨率的方法

    // 获取滚动条位置 var scrollLeft = document.body.scrollLeft; var scrollTop = document.body.scrollTop; console.log('滚动条左侧位置: ' + scrollLeft); console.log('滚动条顶部位置: ' + scrollTop); }...

    jquery 判断滚动条到达了底部和顶端的方法

    3. $(document).scrollTop():这个方法获取的是当前滚动条的垂直位置,也就是当前窗口的顶端距离整个页面顶端的垂直距离。 4. $(document).scrollLeft():这个方法用来获取当前水平滚动条的位置,即当前窗口左侧距离...

    C#轻松解决后页面滚动到顶端

    然而,通过巧妙地利用JavaScript和服务器端代码,我们可以实现页面回传后滚动位置的恢复,提供更佳的用户体验。 ### 标题解析:“C#轻松解决后页面滚动到顶端” 标题直接指向了文章的核心主题——使用C#处理页面...

    jQuery网页下拉滚动表格头部固定在顶端代码

    3. **计算头部位置**:在滚动事件的回调函数中,通过`$(window).scrollTop()`获取滚动条的垂直位置。如果这个值大于等于thead的初始位置,就将thead的top值设为这个滚动值,使其保持在视口顶部。否则,恢复thead的...

    大工21秋《JavaScript基础教程与应用》在线作业3-【答案】.pdf

    在 JavaScript 中,可以使用 document.documentElement.scrollTop 属性来获取滚动条距窗口顶端滚动的距离。 本文总结了 JavaScript 基础教程与应用的在线作业 3 的相关知识点,涵盖了 JavaScript 的基本组成、Math ...

    JavaScript获取网页、浏览器、屏幕高度和宽度汇总

    在JavaScript中,获取网页、浏览器和屏幕的高度与宽度是常见的需求,这主要涉及到网页布局、动态效果以及响应式设计。以下是一些关键方法的详细解释: 1. **网页可见区域宽高** - `document.body.clientWidth`:...

    js 文字无限,有间断往上滚动

    这种效果常用于新闻滚动条、公告栏等场景,能够有效地展示大量信息而不会占用过多的网页空间。 ### 技术原理与实现步骤 #### 1. HTML结构定义 在HTML文档中,首先需要定义一个容器来承载滚动的文本。在这个例子中...

    js中的如何定位固定层的位置.docx

    - `element.scrollTop`: 设置或获取位于元素最顶端和窗口中可见内容的最顶端之间的距离。 这些属性可以帮助开发者精确地控制固定层的位置,使其无论页面如何滚动都能保持在预期的位置。在实际应用中,可能还需要...

    JS获取各种宽度、高度的简单介绍

    scrollWidth获取的是元素内部的总宽度,不包括边框和滚动条,而scrollHeight获取的是元素内部的总高度,同样不包括边框和滚动条。当元素内容超出设定的高度时,可以通过scrollHeight属性来判断内容是否需要滚动条。 ...

    asp.net页面触发事件panel滚动条高度不变的实现方法

    默认情况下,浏览器会将滚动条位置重置到顶部,因为浏览器认为这是一个全新的页面加载。然而,我们可以通过保存和恢复滚动位置来避免这种情况。 解决此问题的步骤如下: 1. **保存滚动位置**: 在`<head>`部分...

    获取页面元素实际宽高的属性的使用

    - **`scrollTop` 和 `scrollLeft`**:这两个属性可以用来获取或设置容器顶端到内容顶端或容器左端到内容左端的距离。这些属性通常用于处理滚动行为。 #### 获取页面的实际宽度和高度 要获取整个页面的可视宽度和...

    Jquery实现侧边栏跟随滚动条固定(兼容IE6)

    在本案例中,jQuery被用来监听窗口滚动事件并根据滚动位置动态地给侧边栏添加或移除特定的类,以实现侧边栏随滚动条滚动而固定的效果。 知识点二:侧边栏固定功能的实现原理 侧边栏固定功能的实现主要依赖于CSS的...

    Javascript实现获取窗口的大小和位置代码分享

    在探讨如何使用JavaScript获取浏览器窗口的大小和位置之前,需要了解几个关键的DOM属性,这些属性可以帮助我们收集到窗口的各种尺寸信息以及它在屏幕上的位置。这些属性包括了我们日常开发中可能经常用到的window....

    顶端滚动新闻图片有注释并附带Access数据库

    滚动效果的实现可能包括JavaScript或者jQuery库,这些技术可以实现时间间隔触发的自动滚动,同时也可以提供暂停、继续、上一条、下一条等用户交互功能。图片注释可能通过CSS定位和透明度控制,使其在鼠标悬停时出现...

Global site tag (gtag.js) - Google Analytics