jq scrollTop到底

2024-08-13

深度理解Jquery 中 scrollTop() 方法

这是工作遇到scrollTop() 方法.为了强化自己,把它记录在博客园当中. 下面就开始scrollTop 用法讲解: scrollTop() 定义和用法 scrollTop() 方法设置或返回被选元素的[垂直滚动条位置]. Note: 当滚动条位置位于最顶部时,位置是0:当用于返回位置时: 该方法返回第一个匹配元素的滚动条的垂直位置.当用于设置位置时: 该方法设置所有匹配元素的滚动条的垂直位置. scrollTop() 语法返回滚动条位置 $(selector).scrol

JQ对象到底是什么

jQuery对象是什么,举个例子,$('#id') 返回的就是jQuery对象,这个东西是整个jQuery的核心所在,所以我先来分析它. var jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); }; ...

关于使用JQ scrollTop方法进行滚动定位

没图我说个锤子,先来个自拍镇楼. 又到了每周周五总结时间.我广州刘德华又来讲故事了.这一周没啥任务,就一个任务,产品口头交代了两句,也没有psd没有设计图没有样式.自由发挥,你自己敲代码做个作品出来. what?听到这个的时候我是一脸懵逼.我心里很慌,难道我资深射鸡湿和灵魂画家的身份暴露了?心里不禁感叹,唉,是金子哪里都会发光. 扯太远了,先来总结一下今天要写的东西吧.jquery的scrollTop方法,这是啥子,那就先来一波自我介绍 1.scrollTop() 方法返回或设置匹配元素的滚动条

JQ scrollTop 无效的场景

先要设置DOM为显示,然后在设置scrollTop,先后顺序不能调换.

JQ实现右下角scrollTop()事件

废话不多说,先贴代码 <script> $(document).ready(function(){ $("#id").hide(); $(function(){ // 这个是JQ的工场模式,等同于 $(document).ready(function(){}) 并将DOM对象转化为JQ 对象 $(window).scroll(function(){ //获取 window 窗口对象,当触发scroll事件的时候做什么 if ($(window).scrollTop()>

jq中 offset()方法， scrollTop()方法以及scrollLeft()方法

offset()方法是用来获取元素在当前视窗的相对偏移,其中返回的对象包含两个属性,即top和left,它只对可见元素有效. scrollTop()方法是用来获取元素的滚动条距离顶端的距离. scrollLeft()方法是用来获取元素的滚动条距离左侧的距离.

用JQ仿造礼德财富网的图片查看器

现在就职于一家P2P平台,自然也会关注同行其它网站的前端技术,今天要仿造的是礼德内页的一个图片查看器效果.不过说白了,无论人人贷也好礼德财富也好,很多地方的前端都做的不尽如人意,比如忽略细节.缺乏交互.滥用插件,像今天要仿造的图片查看器,礼德财富也是直接套用的一款叫fancybox的插件: 个人觉得一名合格的前端还是要少用外部插件,减少代码冗余,也方便自己维护(毕竟自己的代码自己一清二楚). 今天咱用JQ来做个属于我们自己的图片查看器,刚好我项目也要用到. 还是老样子,大家可以到我的Github

jq方法

DOM属性-获取和设置页面元素的DOM属性 .addClass()..attr()..prop()..hasClass()..html()..removeAttr()..removeClass()..removeProp(). .toggleClass()..val() .hasClass()返回的是true或flase 回调对象 .callbacks.add()..callbacks.disable()..callbacks.disabled()..callbacks.empty()..cal

scrollTop、scrollHeight与clientHeight

MDN上概念 scrollTop:获取或设置一个元素的内容垂直滚动的像素数. scrollHeight:一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容. clientHeight:元素内部的高度(单位像素),包含内边距,但不包括水平滚动条.边框和外边距. 只看概念,似懂非懂,还是要自己测试一遍才知道,做个记录,以下为谷歌浏览器测试. css .box { height: 500px; width: 300px; overflow: scroll; color: #fff; } htm

在firefox浏览器下，scrollTop始终为0的问题

firefox下,带dtd文档申明: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 的页面不支持document.body.scrollTo

【JQ+锚标记实现点击页面回到顶部】

前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑着走的,还给小白挥了挥手,微笑一个.那句话叫什么来着,佛祖虽给你关了一扇门,说不定会再给你开一扇窗.明天我就换工作了,我感谢我的同学. a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示[回到顶部+回到首页]的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方

单元测试地二蛋先弄个两个原生模块1个原始的一个jq插件

放羊测试测完了再测这两个瞎搞的下拉列表组建看看从单元测试模块化的角度组建会写成啥样 1:ajax请求简单文本 2:1个页面多个实例 3:复杂展示+自定义点击+自定义处理函数 4:延迟请求 5 插件封装 jq和reqjs 6:jsonp 支持(还未实现) jq /** * Created by qqloving on 14-3-24. */ (function($) { $.fn.xiala = function(ops) { var url=ops.u

JQ返回顶部代码分享~~~~

1.jq代码: <script type="text/javascript"> $(function() { $("#tbox").click(scrollToTop); }); function scrollToTop() { $("body,html").animate({ scrollTop: 0 }, 600); return false; } </script> <script type="tex

(document).height()、$(document).scrollTop()

(document).height().$(document).scrollTop(),有需要的朋友可以参考下. jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用. 注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变jQuery(document).height()是不变的. $(document).scrollTop()

jQ插件--时间线插件和拖拽API

这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接, 那个三角会滚动, 然后左侧的界面也会滚动: 实际的效果如下图,用户点击左侧的按钮或者右侧的input,滚动条都会主动滚动, 这里有个小技巧就是用after和before伪类生成三角形, 用户点击按钮的滚动效果直接用jq的animate方法: 点击查看DEMO:打开 <!-- //设置内容; window.onWebMessage( '{"ty

图片延迟加载（用jq自己写的方法）

$(function() { $("img.lazy").attr("src","2.jpg"); show(); $(window).scroll(function () { show(); }); function show(){ $("img.lazy").each(function () { var clientH = window.screen.availHeight; var $height = $(this).h

JQ关于浏览器宽高的获取方式

JQ关于浏览器宽高的获取方式 alert($(window).height()); //浏览器时下窗口可视区域高度alert($(document).height()); //浏览器时下窗口文档的高度alert($(document.body).height());//浏览器时下窗口文档body的高度alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度包括border padding marginalert($(window

搞懂offsetY、offsetTop、scrollTop、offsetHeight、scrollHeight

先搞offsetTop,最难懂的就是它了官方解释:返回当前元素的上边界到它的包含元素的上边界的偏移量,以像素为单位.这真TM坑爹啊!有木有!经过仔细研究查找得出结论:offsetTop是相对于离它最近的具有绝对或相对定位的父级元素的距离,有点绕口是不是?别急,咱慢慢剥开它...首先一定要明白offsetTop是一个相对值,那它到底是相对于谁的值呢,现在的女明星不都流行找干爹嘛,offsetTop也给自己找了一个,别人的要求是要有钱有权,而它的要求是要有position(只能是relative和

jQuer中 height scrollTop

jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用. 注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变,但是jQuery(document).height()是不变的. $(document).scrollTop() //获取垂直滚动的距离即当前滚动的地方的窗口顶端到整个页面顶端的距离 $(document).scroll

jQuery—一些常见方法（2）DOM操作【insertBefore(),insertAfter(),appendTo(),prependTo(),before(),after(),append(),prepend(),remove(),on(),off(),scrollTop()】

一.insertBefore() 如下代码:找到span标签,将span标签剪切到div的前面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="../../jq-practice/jq/jquery-2.2.1.min.js">&

基于jq插件开发及弹窗实例

基于jq的插件开发是什么鬼,$.fn是什么鬼,我在实际工作中也遇到过这个问题,下面就让我们一起来看一看这些都是什么鬼. 首先我们介绍$.fn. $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 那么你可以这样子:$("#div").abc(); jQuery为开发插件提拱了两个方法,分别是: jQu

jq scrollTop到底

热门专题