作为vue的初级使用者，在开发过程中遇到的坑太多了。在看页面的时候发现了页面滚动的问题，当一个页面滚动了，点击页面上的路由调到下一个页面时，跳转后的页面也是滚动的，滚动条并不是在页面的顶部。
最开始我使用了一个很笨的方法，每个页面上都加上window.scrollTop(0,0);来解决问题，但是这个太繁琐了。最后和小伙伴们商量了一下，在main.js页面上加了这么一段代码
router.afterEach(function (to) {window.scrollTo(0, 0)
})...
先用文字介绍一下这四个属性。
scrollLeft 返回当前元素的左边界到它的包含元素的左边界的偏移量。
scrollTop 返回或设置匹配元素的滚动条的垂直位置。
scrollWidth 返回元素的完整的宽度，包括内边距。
scrollHeight 返回元素的完整的高度 ，包括内边距。先用文字介绍一下这四个属性。
scrollLeft(scrollLeft详解) 返回当前元素的左边界到它的包含元素的左边界的偏移量。
scrollTop(scrollTop详解) 返回或设置匹配元素的滚动条的垂...
在标准的浏览器下，需要注意的东西，例如双击自动滚动
var diffY; if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop else {/*Netscape stuff*/}
下面的演示中，外层元素的高度值是200px,内层元素的高度值是300px。很明显，“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有部分内容会隐没在“外层元素的上边界”之外，scrollTop就等于这部分“不可见的内容”的高度。 演示：（拖动滚动条，可以看到scrollTop值的变化） 这些文字显示在内层元素中。 scrollTop值是： 这些文字显示在内层元素中。 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]解释： 内层元...
做页面的时候可能会用到位置固定的层，读取 document.body.scrollTop 来设置层的位置，像这样：­ window.onscroll = function (){ var oFix = document.getElementById("divfix"); oFix.style.top = document.body.scrollTop + "px"; } 可是怎么没有达到预期效果呢，输出 document.body.scrollTop 的值一看，一直都是 0。原来是 DTD 的问题,要是页面直接用 开头的话就没有问题了。但是要符合 web 标准，DTD 当然是不能少的。具...
代码如下: jQuery的位置函数(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小应用 #divShow{width:100px;height:50px;background-color:Green;display:none;} #divAd{width:100px;height:100px;background-color:Red;position:absolute;top:100px;left:100px;} //在文本框下方显示一个div，类似日历控件那样。 function showDiv(obj){ jQuery("#divShow").css("left",jQuery(o...
网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.offsetHeight (包括边线的宽);网页正文全文宽： document.body.scrollWidth;网页正文全文高： document.body.scrollHeight;网页被卷去的高： document.body.scrollTop;网页被卷去的左： document.body.scrollLeft;网页正文部分上： window...
举个例子： Css:假定进行如下简单设置； html{height:1000px;} JS： 代码如下: function(){ window.scrollBy(0,100); alert(window.pageYOffset); } Results: //点击一次后弹出：100;得出的是一个数值，read-only属性；value：Integer(整数)，default:0; 附注：当滚动条到达页面最底部时，window.pageYOffset=1000-document.documentElement.clientHeight;
代码如下: js位子表示 function testClick(oDiv){ var oDivId=document.getElementById(oDiv); alert("offsetHeight:"+oDivId.offsetHeight+"\n offsetWidth:"+oDivId.offsetWidth+"\n offsetLeft:"+oDivId.offsetLeft+"\n offsetRight:"+oDivId.offsetLeft+"\n offsetTop:"+oDivId.offsetTop +"\n offsetParent:"+oDivId.offsetParent +"\n scrollHeight:"+oDivId.scrollHeight+"\n scrollWidth:"+oDivId.scrollWidth+"\n sc...
今天在修改原群组弹窗的时候,发现弹窗在谷歌浏览器chrome下的位置跟在别的浏览器下不一样.逐一排查,肯定是在计算窗口位置的时候,少加了scrollTop这个值.在查看源代码的时候发现直接采用document.documentElement.scrollTop这个,但在chrome下这个值为0. 在有文档声明的情况下,也就是第一行有个dtd声明,标准浏览器认识document.documentElement.scrollTop,可chrome竟然不认识这斯.在没有文档声明的情况下,chrome,safari还是可以读取到...
CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。 代码如下:$(#shang).click(function(){$(html,body).animate({scrollTop: 0px}, 800);});上面的代码表示滚动条跳到0的位置，页面移动速度是800。结合scrollTop实用示例： 代码如下:jQuery(document).ready(function($){ $(#shang).click(function(){ $(html,body).animate({...
本文实例讲述了jQuery中scrollTop()方法用法。分享给大家供大家参考。具体分析如下：
此方法返回或设置匹配元素的滚动条的垂直偏移量。
语法结构一:
当scrollTop()方法不带有参数的时候是返回匹配元素相对滚动条顶部的偏移量。代码如下:$(selector).scrollTop()
实例代码:代码如下:scrollTop()函数-脚本之家#div1{border:1px solid black;width:200px;height:200px;overflow:auto
}
#div2{height:250px;}
#div3{height:48px;width:...
scrollTop 表示滚动的高度，默认从position:0;开始向下滚，scrollTop（offset）的offset表示相对顶部的偏移，以像素计，
scrollTop()滚动的高度既能‘设置'滚动值，也能‘获取'滚动值。
当设置滚动值时，该方法就会设置所有匹配元素的滚动值。
当获取滚动值时，该方法只返回第一个匹配元素的滚动位置。
需要获取scrollTop的值，可以参考如下代码：代码如下:
var scrollTop = document.documentElement.scrollTop || window.pageYOf...
1、各浏览器下 scrollTop的差异
IE6/7/8/9/10：
对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ；
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop ；
Safari:
safari 比较特别，有自己获取scrollTop的函数 ： window.pageYOffset ；
Firefox:
火狐等等相对标准些的浏览器就省心多了，直接用 document.documentElement.scrollTop ；
2、获取scrollTop值
完美的获取...
Web页面常常比显示该页面的浏览器窗口还要大，因为Web文档具有很多内容，往往会导致页面比浏览器还要高，有时候甚至还要宽，这迫使访问者通过滚动来查看整个页面（如图10-8所示）。当访问者滚动页面的时候，一部分文档会从视线中消失。例如，Web页面不能完全放入浏览器窗口中，文档会向左或向上滚动，因此，页面的顶部和左边都会消失在视野之内。这意味着浏览器窗口的左上角和文档的左上角并不相同。如果试图放置一个新元素，例如，...
先用文字介绍一下这四个属性。