jquery中用$(window).height() 怎么获取的高度不是窗口的高度呢?
$(window).height();获取浏览器显示区域的高度;
$(window).width();获取浏览器显示区域的宽度;
$(document.body).height();获取页面文档的高度;
$(document.body).width();获取页面文档的宽度;
$(document).scrollTop();获取滚动条到顶部的高度;
$(document).scrollLeft();获取滚动条到左边的宽度;
jquery中offset和position的区别?
jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下:
offset():获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
用法举例:offset()
Hello
2nd Paragraph
第二种用法:offset( coordinates )
让我们重新设置元素的位置这个元素的位置是相对于document对象的。
如果对象原先的position样式属性是static的话,会被改成relative来实现重定位。
Hello
2nd Paragraph
position():
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性:top 和 left。为精确计算结果,
请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
用法举例:
Hello
offset()和position()的区别:
使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。
使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移
使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移。
一般情况下,如果要显示的元素B存放在元素A的同一父元素下(即B为A的兄弟节点),这个时候使用position() 是最合适的;
如果显示的元素B存放在DOM的最顶端或者最底端(即其父元素就是body)。这个时候用offset()是最好的。
淘宝首页返回顶部效果怎么做到的?
重写window.onscroll()事件,先将返回顶部div设置为position:fixed;right:10px;bottom:10px;display:none,一旦event.scrollTop>100(100可以设置为你想要的值)就display:block(fadeIn()),否则display:none(fadeOut())。还要设置返回顶部div点击事件,onclick(function(){$('body,html').animate({scrollTop:0},1000);}),这个什么意思不用我多说吧,既然搞Jquery,动画还是应该晓得。
<style type="css/text"> #gotop{position:fixed;right:10px;bottom:10px;display:none}</style><div id="gotop"></div><script type="javascript/text"> $(function(){ $(window).scroll(function(){ if($(window).scrollTop > 100){ $("#gotop").fadeIn(1000);//一秒渐入动画 }else{ $("#gotop").fadeOut(1000);//一秒渐隐动画 } }); $("#gotop").click(function(){ $('body,html').animate({scrollTop:0},1000); }); });</script>