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.relativeTop  
指定相对计算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。

options.scroll  
是否把滚动条计算在内,默认TRUE

options.padding  
是否把padding计算在内,默认false

options.margin
是否把margin计算在内,默认true

options.border
是否把边框计算在内,默认true


二、使用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;   

转载于:https://www.cnblogs.com/wangshengli520/p/9787005.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/396501.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vs dll必须和exe在同一个目录_Win10系统丢失 .dll 文件的三种解决方案教程

有时候开机或打开一个软件时,系统会提示无法启动程序,这是怎么回事呢?这是因为计算机丢失某个或某些dll文件,由于系统本身不存在这些运行库文件,需要进行添加才能使用该软件。方法一:下载丢失的.dll文件&am…

datagrid页面获取表单一条数据的例子

【问题背景】 最近在做ITOO考评的时候想从页面获取表单选中的数据: 【代码】 在数据网格(datagrid)组件包含两种方法来检索选中行数据: getSelected:取得第一个选中行数据,如果没有选中行,则返回…

utf-8转换gbk代码_将代码转换为现金-如何以Web开发人员的身份赚钱并讲述故事。...

utf-8转换gbk代码by Kurt由库尔特 将代码转换为现金-如何以Web开发人员的身份赚钱并讲述故事。 (Turning code to cash — How to make money as a Web Developer and live to tell the tale.) So you just learnt to code. You’re eager and anyone who can’t code thinks …

Spring+SpringMVC+MyBatis+easyUI整合基础篇(十)SVN搭建

前言 前面一篇文章讲了一下版本控制,但其实这一篇并没有打算讲细节的,感觉应该自己去动手弄一下,后来考虑了一下,版本控制真的挺重要的,如果自己实在搭建不好反而不去使用的话,真的有点可惜,当然…

AHK-UMSS框架 (AHK通用修饰键解决方案,任何键都是修饰键)

AHK-UMSS框架 (AHK通用修饰键解决方案,任何键都是修饰键) 1 #Warn2 #NoEnv ; # 禁用环境变量检查:不检查空变量是否为"环境变量",可以极大地提高效率3 #Hotstring EndChars ◎ ; # 热字串终止符号设置:只把空格作为终止符,(文档上所说是不能单独用空格的…

flask-sqlalchemy mysql_Flask SQLAlchemy连接到MySQL数据库

设置代码:我正在构建一个带有AngularJS前端的基本Flask应用程序,目前我需要连接到我用Godaddy phpmyadmin托管的MySQL数据库。这是我的一部分__init__.pyfrom flask import Flaskfrom flask.ext.sqlalchemy import SQLAlchemy# Create instnace called a…

有没有编码的知识图谱_没有人告诉您关于学习编码的知识-以及为什么如此困难...

有没有编码的知识图谱by Joyce Akiko通过乔伊斯明子 没有人告诉您关于学习编码的知识-以及为什么如此困难 (What Nobody Tells You About Learning To Code — And Why That Makes It So Hard) Are you familiar with the article Why Learning to Code is So Damn Hard?您是…

Node.js之HTPP URL

几乎每门编程语言都会包括网络这块,Node.js也不例外。今天主要是熟悉下Node.js中HTTP服务。其实HTTP模块是相当低层次的,它不提供路由、cookie、缓存等,像Web开发中不会直接使用,但还是要熟悉下,这样也方便以后的学习。 一、统一资源标识符URL 这个是非常…

串口数据波形显示_【专题教程第6期】SEGGER的J-Scope波形上位机软件,RTT模式波形上传可飙到500KB/S...

【专题教程第6期】SEGGER的J-Scope波形上位机软件,RTT模式波形上传速度可狂飙到500KB/S左右说明:1、在实际项目中,很多时候,我们需要将传感器或者ADC的数值以波形的形式显示。通常的解决办法是用串口上位机,USB接口上位…

JavaScript-基础入门.0014.JavaScript内置对象

2019独角兽企业重金招聘Python工程师标准>>> 简单介绍: 说明: 内置对象就是不依赖宿主环境在程序执行之前已经存在的对象,不必显式的实例化内置对象,前面已经介绍了大部分内置对象,而Global和Math两个单体内置对象比较特殊,所以单独讲. Global对象: 说明: Js中不属于…

Java中字符串连接符(+)和append的区别

参考链接:https://www.jianshu.com/p/849f1d443b3a 文章结构: 第一部分:对的原理进行分析 第二部分: 和 append 循环对比(贴出代码,以及分别循环后的反编译字节码,来对两者进行对比)…

百度seo排名点击器_SEO整站优化思路 - 百度seo排名点击

原出处:超级排名系统原文链接:SEO整站优化思路 - 超级排名系统整站优化的大体思路包括哪些?下面超级排名系统小编详细给大家讲解下:一、建站优化我们在建立网站之前与建立网站的时候需要做的优化,包括标题优化、描述关…

unity 天空盒_Unity自定义可编程渲染管线(SRP)(二)——编写第一个自定义SRP

一句话描述,我们可以把SRP分解成两个部分,分别是SRP Asset,SRP Instance。SRP AssetSRP Asset是一个Unity Asset文件,用来存储渲染管线的特定配置信息,包含的信息有:游戏物体是否应该投射阴影;使…

构建node.js基础镜像_在Android上构建Node.js应用程序

构建node.js基础镜像by Aurlien Giraud通过AurlienGiraud 在Android上构建Node.js应用程序 (Building a Node.js application on Android) 第2部分:Express和NeDB (Part 2: Express and NeDB) In Part 1 we saw how to use Termux, a Terminal emulator and Linux …

【design pattern】工厂方法模式和抽象工厂模式

前言 设计模式分为三大类: 创建型模式:工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式; 结构型模式:适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式; 行为型模式&#xff1…

linux中使用随机数

(1)单纯使用rand重复调用n次,就会得到一个0-RAND_MAX之间的伪随机数,如果需要调整范围,可以得到随机数序列后再进行计算。(2)单纯使用rand来得到伪随机数序列有缺陷,每次执行程序得到的伪随机序列是同一个序列,没法得到…

mysql 异地备份工具_异地备份简单实现(mysql)

该脚本只适用于MYISAM引擎,如果需要适用于innodb,请修改备份命令即可。#!/bin/bash#该脚本只能用来备份myisam引擎数据库#author:vaedit#date:2017/9/18#备份过程function beifen(){BACKDIRdate "%Y-%m-%d-%H"mkdir /backup/$BACKD…

python管理数据库设计_Pycharm+Django+Python+MySQL开发 后台管理数据库

Django框架十分简单易用,适合搭建个人博客网站。网上有很多教程,大多是关于命令行操作Django,这里分享一些用最新工具进行Django开发过程,主要是PyCharm太强大,不用有点可惜。第一次写技术开发类的博文,可能…

你鼓舞了我是世界杯主题曲吗_选择方法和鼓舞人心的网站列表

你鼓舞了我是世界杯主题曲吗by Kristoffer Andreasen通过克里斯托弗安德烈森 选择方法和鼓舞人心的网站列表 (The pick and choose approach and a list of inspirational websites) In the past couple of years I have created quite a few websites. In the beginning, I h…

共享程序集GAC

原文标题: 原文地址:https://www.cnblogs.com/1996V/p/9037603.html 共享程序集GAC 我上面说了这么多有关CLR加载程序集的细节和规则,事实上,类似于mscorlib.dll、System.dll这样的FCL类库被引用的如此频繁,它已经是我…