当前位置：文档之家 › js返回网页顶部scrollTop用法及window.onscroll事件

js返回网页顶部scrollTop用法及window.onscroll事件

  • 格式：docx
  • 大小：17.59 KB
  • 文档页数：3

下载文档原格式

  / 3

合集下载

js中scrollTop（）方法和scroll（）方法用法示例

js中scrollTop（）方法和scroll（）方法用法示例

js中scrollTop（）⽅法和scroll（）⽅法⽤法⽰例本⽂实例讲述了js中scrollTop()⽅法和scroll()⽅法⽤法。

分享给⼤家供⼤家参考，具体如下：设置滚动条据顶部的⾼度：$("div").scrollTop(100); //把 scroll top offset 设置为 100px获得滚动条的⾼度：$("div").scrollTop()；//获得 scroll top offset触发滚动事件$(selector).scroll()将函数绑定到滚动事件中：$(selector).scroll(function)监听滚动事件，判断当滚动到距离顶部700px时，将其position改为fixed：$(window).scroll(function(){var $scroll_height = $(".gray").scrollTop();if($scroll_height > 700){$(".hot-nav").addClass("fix-nav");} else {$(".hot-nav").removeClass("fix-nav");}})这是jquery中的⽤法，offset() 获取匹配元素在当前视⼝的相对偏移。

返回的对象包含两个整形属性：top 和 left。

此⽅法只对可见元素有效。

top:$(this).offset().top+25+"px"更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。

js中的onscroll的用法

js中的onscroll的用法

js中的onscroll的用法在JavaScript中，onscroll是一个事件属性，它用于指定在滚动事件发生时执行的函数。

使用onscroll的常见用法是为网页添加滚动监听器，以便在用户滚动页面时执行某些操作。

以下是一个基本示例：```javascriptwindow.onscroll = function() {//在滚动事件发生时执行的代码console.log("页面滚动了！");};```在这个示例中，当用户滚动页面时，函数将在控制台上打印出"页面滚动了！"的消息。

除了基本的滚动事件监听外，onscroll还可以用于实现各种滚动效果，例如使用滚动条实现导航栏的固定位置。

拓展一些常见的onscroll用法：1.获取页面滚动的垂直距离（scrollTop）：```javascriptwindow.onscroll = function() {var scrollTop = window.pageYOffset ||document.documentElement.scrollTop;console.log("页面滚动距离：" + scrollTop + "px");};```2.实现页面滚动到底部加载更多内容：```javascriptwindow.onscroll = function() {if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {//执行加载更多内容的操作console.log("加载更多内容！");}};```3.实现滚动时改变元素样式：```javascriptwindow.onscroll = function() {var header = document.querySelector("header");if (window.pageYOffset > 100) {header.classList.add("scrolled");} else {header.classList.remove("scrolled");}};```在这个示例中，当页面滚动超过100像素时，给<header>元素添加了一个名为"scrolled"的类，从而实现导航栏的样式改变。

JS实现回到页面顶部动画效果的简单实例

JS实现回到页面顶部动画效果的简单实例

JS实现回到页⾯顶部动画效果的简单实例最近在模仿各⼤⽹站写页⾯样式和交互，发现好多都有回到顶部的需要，所以写了⼀下js，记录下来。

发现还可以添加从快到慢的动画效果和随时下拉滚动条停⽌滚动的功能，参考了imooc上相关课程，最终实现JS代码如下：//页⾯加载后触发window.onload = function(){var btn = document.getElementById('btn');var timer = null;var isTop = true;//获取页⾯可视区⾼度var clientHeight = document.documentElement.clientHeight;//滚动条滚动时触发window.onscroll = function() {//显⽰回到顶部按钮var osTop = document.documentElement.scrollTop || document.body.scrollTop;if (osTop >= clientHeight) {btn.style.display = "block";} else {btn.style.display = "none";};//回到顶部过程中⽤户滚动滚动条，停⽌定时器if (!isTop) {clearInterval(timer);};isTop = false;};btn.onclick = function() {//设置定时器timer = setInterval(function(){//获取滚动条距离顶部⾼度var osTop = document.documentElement.scrollTop || document.body.scrollTop;var ispeed = Math.floor(-osTop / 7);document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;//到达顶部，清除定时器if (osTop == 0) {clearInterval(timer);};isTop = true;},30);};};以上这篇JS实现回到页⾯顶部动画效果的简单实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

鼠标滚轮实现屏幕滚动(scrollTop用法详解)

鼠标滚轮实现屏幕滚动(scrollTop用法详解)

scrollTop 用法说明下面的演示中，外层元素的高度值是200px,内层元素的高度值是300px。

很明显，“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有部分内容会隐没在“外层元素的上边界”之外，scrollTop就等于这部分“不可见的内容”的高度。

演示：（拖动滚动条，可以看到scrollTop值的变化）这些文字显示在内层元素中。

scrollTop值是：<div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素"><div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素">这些文字显示在内层元素中。

</div></div>解释：内层元素的高度值300px > 外层元素的高度值200px,因此“外层元素的内容”(也就是“内层元素”)无法完全显示，而外层元素把overflow设置为auto，因此外层元素的右侧会出现一个上下方向的滑动条初始状态下，“内层元素的上边界”和“外层元素的上边界”重合，没有任何内容超过“外层元素的上边界”，此时scrollTop属性的值为0。

当向下拖动滚动条时，超过“外层元素的上边界”的内容会逐渐增多，scrollTop值就等于这些超出的部分。

当拖动滚动条到最底部时，“内层元素的下边界”和“外层元素的下边界”重合，超过“外层元素的上边界”的内容的高度=300px-200px=100px，这也就是此时的scrollTop值。

通过js代码来读取，写入scrollTop的值注意：scrollTop的使用方式是element.scrollTop，而不是element.style.scrollTop通过js代码来读取scrollT op的值上面的演示实例中，其实已经用到了scrollT op的读取操作。

js滚到页面顶部

js滚到页面顶部

js滚到页⾯顶部<style>.div1, .div2, .div3, .div4 {height: 400px;width: 400px;}.div1 {background: #eea7cf;}.div2 {background: #a95ee1;}.div3 {background: #c57cad;}.div4 {background: #790d86;}.fixed-tool { position: fixed;top: 50px;right: 0;display: none;/*border: 1px solid black;*/}.fixed-tool > a {display: block;}.go-top {background: #bb9cff;padding: 10px 1px;}.go-top-with-img {padding: 0;width: 40px;height: 40px;background: url(top_bg.png) no-repeat;}.go-top-with-img:hover {background-position: left -40px;}</style></head><body><h1 id="title1">标题1 </h1><div class="div1"></div><h1>标题2</h1><div class="div2"></div><h1>标题3</h1><div class="div3"></div><h1>标题4 </h1><div class="div4"></div><h1>标题5 </h1><div class="div1"></div><h1>标题6 </h1><div class="div3"></div><h1>标题7</h1><div class="div2"></div><h1>标题8 </h1><br/><div class="fixed-tool" id="fixedTool"><a href="#title1">标题1</a><a href="javascript:;" class="go-top">顶部</a><a href="javascript:;" class="go-top-with-img" id="goTop"></a></div><script>//"use strict";window.onload = function () {var oGoTopLink = document.getElementById("goTop");var iClientHeight = document.documentElement.clientHeight;var fixedTool = document.getElementById("fixedTool");var timer = null;window.onscroll = function () {//判断是否滚到了第⼆屏,是则显⽰，否则隐藏var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop;if (sScrollTop >= iClientHeight) {fixedTool.style.display = "block";} else {fixedTool.style.display = "none";}};oGoTopLink.onclick = function () {timer = setInterval(function () {var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop;var iSpeed = Math.floor(-sScrollTop / 12);document.body.scrollTop = document.documentElement.scrollTop = sScrollTop + iSpeed;document.body.onmousewheel = function(){return false;};if (sScrollTop <= 0) {clearInterval(timer);document.body.onmousewheel = function(){return true;};}}, 30);}};</script></body></html>//封装以上⽅法：/*** @param {String} sWrapId :the element which wraped the go-to-top link* @param {String} sEleId :the go-to-top element* @param {Number} iSpeed : speed of scrolling ,smaller faster* @returns {undefined}* usage: goTop("fixedTool", "goTop", 12); 关于样式：可以⾃⼰写，如果想⽤默认样式，就⽤我上述例⼦的那些class name, */function goTop(sWrapId, sEleId, iSpeed){var oGoTopLink = document.getElementById(sEleId);var iClientHeight = document.documentElement.clientHeight;var wrapBox = document.getElementById(sWrapId);var timer = null;window.onscroll = function () {//判断是否滚到了第⼆屏,是则显⽰，否则隐藏var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop;if (sScrollTop >= iClientHeight) {wrapBox.style.display = "block";} else {wrapBox.style.display = "none";}};oGoTopLink.onclick = function () {timer = setInterval(function () {var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop;var iScrollSpeed = Math.floor(-sScrollTop / iSpeed);document.body.scrollTop = document.documentElement.scrollTop = sScrollTop + iScrollSpeed;document.body.onmousewheel = function(){return false;};if (sScrollTop <= 0) {clearInterval(timer);document.body.onmousewheel = function(){return true;};}}, 30);};return undefined;}<script>//"use strict";window.onload = function () {var oGoTopLink = document.getElementById("goTop");var iClientHeight = document.documentElement.clientHeight;var fixedTool = document.getElementById("fixedTool");var bIsTop = true;var timer = null;//当正在滚回顶部的动作中，⽤户滚动滚轮的话，停⽌滚回顶部的动作window.onscroll = function () {//判断是否滚到了第⼆屏,是则显⽰，否则隐藏var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop;if (sScrollTop >= iClientHeight) {fixedTool.style.display = "block";} else {fixedTool.style.display = "none";}if (!bIsTop) {clearInterval(timer);}bIsTop = false;};oGoTopLink.onclick = function () {timer = setInterval(function () {var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop;var iSpeed = Math.floor(-sScrollTop / 12);document.body.scrollTop = document.documentElement.scrollTop = sScrollTop + iSpeed; bIsTop = true;if (sScrollTop <= 0) {clearInterval(timer);}, 30);}};</script>。

JS返回页面顶部代码

JS返回页面顶部代码

三款简单的JS返回页面顶部代码本文介绍三款简单的返回页面顶部代码，可以使用简单的HTML锚标记，也可使用Javascript Scroll函数动态返回，其它的还有悬浮脚本等有点复杂了，本文不再介绍，大家根据自己需要选择其中的一种即可，总之简约最美的，能减少代码就减少代码，能不调用的就别调用，要不是天缘博客的文章都是牛长也不会添加这个功能。

一、使用锚标记返回页面顶部使用HTML锚标记最简单，就是看起来有点不好看，点击后会在地址栏显示这个锚标记，其它的倒没什么。

页面顶部放置：<a name="top" id="top"></a>放置位置在<body>标签之后随便找个地方放都可以，只要靠近顶部即可。

页面底部放置：<a href="#top" target="_self">返回顶部</a>二、使用Javascript Scroll函数返回顶部scrooll函数用来控制滚动条的位置，有两种很简单的实现方式：方式1：view sourceprint?1 <a href="javascript:scroll(0,0)">返回顶部</a>scroll第一个参数是水平位置，第二个参数是垂直位置，比如要想定位在垂直50像素处，改成scroll(0,50)就可以了。

方式2：本方式是渐进式返回顶部，要好看一些，代码如下：view sourceprint?1 function pageScroll() {2 window.scrollBy(0,-10);3 scrolldelay = setTimeout('pageScroll()',100);4 }56 <a href="pageScroll();">返回顶部</a>这样就会动态返回顶部，不过虽然返回到顶部但是代码仍在运行，还需要在pageScroll函数加一句给停止掉。

js 滚动条方法

js 滚动条方法

js 滚动条方法
JS滚动条方法是用于控制网页中滚动条的JavaScript函数集合。

使用这些方法，您可以在网页上自定义和控制滚动条的行为，以满足您的特定需求。

以下是一些常见的JS滚动条方法：
1. scrollTop()：获取或设置页面中垂直滚动条的位置。

2. scrollLeft()：获取或设置页面中水平滚动条的位置。

3. scrollTo()：将页面滚动到指定的位置。

4. scrollBy()：将页面滚动指定的距离。

5. window.innerHeight：获取页面可见区域的高度。

6. window.innerWidth：获取页面可见区域的宽度。

7. document.documentElement.scrollHeight：获取整个文档的高度。

8. document.documentElement.scrollWidth：获取整个文档的宽度。

9. onscroll事件：在滚动条发生滚动时触发。

通过使用这些方法，您可以轻松地实现各种滚动条行为，例如滚动到特定位置、自动滚动以及在滚动时执行其他操作。

- 1 -。

网页中返回顶部代码（多种方法）另附注释说明

网页中返回顶部代码（多种方法）另附注释说明

⽹页中返回顶部代码（多种⽅法）另附注释说明下⾯就说下简单的返回顶部效果的代码实现，附注释说明。

1. 最简单的静态返回顶部，点击直接跳转页⾯顶部，常见于固定放置在页⾯底部返回顶部功能⽅法⼀：⽤命名锚点击返回到顶部预设的id为top的元素复制代码代码如下:<a href="#top" target="_self">返回顶部</a>⽅法⼆：操作scrooll函数⽤来控制滚动条的位置（第⼀个参数是⽔平位置，第⼆个参数是垂直位置）复制代码代码如下:<a href="javascript:scroll(0,0)">返回顶部</a>缺点：返回效果是⽴即的，不符合⼀般浏览页⾯的滚动感觉；静态固定于页⾯底部，⽤户不⼀定看得到。

2. 简单的静态返回顶部，⽤js模拟滚动效果上滑⾄顶部复制代码代码如下:function pageScroll(){//把内容滚动指定的像素数（第⼀个参数是向右滚动的像素数，第⼆个参数是向下滚动的像素数）window.scrollBy(0,-100);//延时递归调⽤，模拟滚动向上效果scrolldelay = setTimeout('pageScroll()',100);//获取scrollTop值，声明了DTD的标准⽹页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为⼆者只有⼀个会⽣效，另⼀个就恒为0，所以取和值可以得到⽹页的真正的scrollTop值var sTop=document.documentElement.scrollTop+document.body.scrollTop;//判断当页⾯到达顶部，取消延时代码（否则页⾯滚动到顶部会⽆法再向下正常浏览页⾯）if(sTop==0) clearTimeout(scrolldelay);}复制代码代码如下:<a onclick="pageScroll()">返回顶部</a>缺点：滚动效果不平滑，且在页⾯很长时点击返回顶部，未向上到达页⾯顶部⽆法再正常浏览页⾯；同上依旧是静态固定于页⾯底部，不⼀定能曝光在⽤户⾯前。

javascript中scrollTop详解

javascript中scrollTop详解

javascript中scrollTop详解scrollTop 表⽰滚动的⾼度，默认从position:0;开始向下滚，scrollTop（offset）的offset表⽰相对顶部的偏移，以像素计，<br/>scrollTop()滚动的⾼度既能‘设置'滚动值，也能‘获取'滚动值。

当设置滚动值时，该⽅法就会设置所有匹配元素的滚动值。

当获取滚动值时，该⽅法只返回第⼀个匹配元素的滚动位置。

需要获取scrollTop的值，可以参考如下代码：复制代码代码如下:var scrollTop = document.documentElement.scrollTop || window.pageYOfset ||document.body.scrollTop;1、各浏览器下 scrollTop的差异IE6/7/8：对于没有doctype声明的页⾯⾥可以使⽤ document.body.scrollTop 来获取 scrollTop⾼度；对于有doctype声明的页⾯则可以使⽤ document.documentElement.scrollTop；Safari:safari ⽐较特别，有⾃⼰获取scrollTop的函数： window.pageYOffset ；Firefox:⽕狐等等相对标准些的浏览器就省⼼多了，直接⽤ document.documentElement.scrollTop ；2、获取scrollTop值完美的获取scrollTop 赋值短语：复制代码代码如下:var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;通过这句赋值就能在任何情况下获得scrollTop 值。

仔细观察这句赋值，你发现啥了没？？没错，就是 window.pageYOffset (Safari) 被放置在 || 的中间位置。

scrolltop用法

scrolltop用法

scrolltop用法ScrollTop是JavaScript中的一个重要的概念，它是用来获取或者设置浏览器的窗口或者文档的滚动条位置的，它可以帮助我们更容易地实现文档滚动动画效果。

ScrollTop的用法相当简单，具体包括以下几个步骤：一、取得ScrollTop值首先，我们需要获取ScrollTop值，可以使用JavaScript中的document.documentElement.scrollTop者document.body.scrollTop来获取。

其中，document.documentElement.scrollTop可以获取当前HTML文档滚动条距离顶部的距离，而document.body.scrollTop则可以获取body元素滚动条距离顶部的距离。

二、设置ScrollTop值当我们需要改变ScrollTop值的时候，可以使用document.documentElement.scrollTop者document.body.scrollTop来设置ScrollTop的值。

这里可以使用window.scrollTo()方法，它可以使页面跳转到指定的坐标，比如说window.scrollTo(0, 1000)。

在改变ScrollTop值之前，可以使用一个变量来保存ScrollTop值，这样就可以在改变之前得到原先的值。

三、使用ScrollTop实现动画效果使用ScrollTop的动画非常简单，首先定义一个变量oldscrolltop来保存原先的ScrollTop值，然后使用setInterval()法来每隔20毫秒改变一次ScrollTop值，不断的改变ScrollTop值，直到满足一定的条件。

最后再把ScrollTop的值设置为原先的值，就可以实现动画效果了。

四、ScrollTop的局限性尽管ScrollTop是JavaScript中很重要的一个概念，但它也有一些局限性，比如它只能检测到滚动条滚动的距离，并不能检测到其他的滚动信息，比如滚动条的方向以及滚动条所在的位置等，它也不能直接控制元素的滚动，只能控制window的滚动。

js实现回到顶部操作

js实现回到顶部操作

js实现回到顶部操作<a href="javascript:;" id="btn" title="回到顶部"></a>样式：#btn {width:40px; height:40px; position:fixed; right:25px; bottom:10px; display:none; background:url(images/top_bg.png) no-repeat left top;} #btn:hover {background:url(images/top_bg.png) no-repeat 0 -39px;}JS代码如下：window.onload = function(){var obtn = document.getElementById('btn'); //获取回到顶部按钮的IDvar clientHeight = document.documentElement.clientHeight; //获取可视区域的⾼度var timer = null; //定义⼀个定时器var isTop = true; //定义⼀个布尔值，⽤于判断是否到达顶部window.onscroll = function(){ //滚动条滚动事件//获取滚动条的滚动⾼度var osTop = document.documentElement.scrollTop || document.body.scrollTop;if(osTop >= clientHeight){ //如果滚动⾼度⼤于可视区域⾼度，则显⽰回到顶部按钮obtn.style.display = 'block';}else{ //否则隐藏obtn.style.display = 'none';}//主要⽤于判断当点击回到顶部按钮后滚动条在回滚过程中，若⼿动滚动滚动条，则清除定时器if(!isTop){clearInterval(timer);}isTop = false;}obtn.onclick = function(){ //回到顶部按钮点击事件//设置⼀个定时器timer = setInterval(function(){//获取滚动条的滚动⾼度var osTop = document.documentElement.scrollTop || document.body.scrollTop;//⽤于设置速度差，产⽣缓动的效果var speed = Math.floor(-osTop / 6);document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;isTop =true; //⽤于阻⽌滚动事件清除定时器if(osTop == 0){clearInterval(timer);}},30);}}。

js网页滚动条滚动事件

js网页滚动条滚动事件

js网页滚动条滚动事件在做js返回顶部的效果时，要监听网页滚动条滚动事件，这个事件就是：window.onscroll。

当onscroll事件发生时，用js获得页面的scrollTop值，判断scrollTop为一个设定值时，显示“返回面部”js网页滚动条滚动事件<style type="text/css">#top_div{position:fixed;bottom:80px;right:0;display:none;}</style><script type="text/javascript">window.onscroll = function(){var t = document.documentElement.scrollTop || document.body.scrollTop;var top_div = document.getElementById( "top_div" );if( t >= 300 ) {top_div.style.display = "inline";} else {top_div.style.display = "none";}}</script><a name="top">顶部<a><div id="top_div"><a href="#top">返回顶部</a></div><br /><br /><div>这里尽量多些<br />以便页面出现滚动条，限于篇幅本文此处略去</div>例子语法解释在style 标签中首先定义top_div css 属性：position:fixed;display:none; 是关键javascript 语句中，t 得到滚动条向下滚动的位置，|| 是为了更好兼容性考虑当滚动超过300 （像素）时，将top_div css display 属性设置为显示(inline)，反之则隐藏(none)必须设定DOCTYPE 类型，在IE 中才能利用document.documentElement 来取得窗口的宽度及高度。

基于Javascript实现返回顶部按钮

基于Javascript实现返回顶部按钮

基于Javascript实现返回顶部按钮⼀个⽹页内容⼀多, 就会分屏显⽰数据, 如果屏⽬很多, ⽤户访问的数据已经到了页⾯的底部, 这时候返回到顶部也是需要⼀点时间. 这样对⽤户体验来说, 可能就稍微逊了⼀点. 所以页⾯数据多的⽹页, 现在都会⽤⼀个"返回顶部"按钮来快速跳转到⽹页的顶部.那现在我们就来实现这么⼀个功能.这个页⾯我们就不写什么数据, 直接就加⼊⼀个a标签来作为返回顶部的按钮, 并给他⼀个class名称:top.<a href="#" class="top">顶部</a>然后设置其样式表:body {height: 3000px;}.top {position: absolute;top: 120px;display: inline-block;width: 50px;height: 50px;line-height: 50px;text-decoration: none;text-align: center;background-color: #666666;color: #ffffff;right: 10px;transition: all 0.3s;visibility: hidden;}.top:hover {background-color: #ff3300;}这⾥body设定为3000的⾼度, 主要是让页⾯有滚动的效果. 按钮⼀般都是放在⽹页的右边靠下⼀点的位置. 这⾥我们通过position来设置.我们还要分析⼀下, 当⽤户的访问的⽹页在页⾯的顶部时, 这个按钮肯定是不显⽰的. 所以我们这⾥⽤了visibility来控制按钮的显⽰与否.界⾯很简单, 我们就先将就⼀下. 下⾯来分析JS的实现.⾸先这个按钮是在整个⽹页的效果上, 因此监听滚动事件需要设置在整个窗⼝上. 因此,我们给window设置⼀个onscroll事件.window.onscroll = function (e) {...}在这个事件⾥我们来控制返回顶部按钮的上下位置, 和是否显⽰. ⾸先来完成上下位置的控制.上下位置的控制, 我们肯定得计算scrollTop的⾼度, 以及⽹页单屏显⽰的⾼度. 当⽤户进⼊页⾯的时候, 我们默认给这个按钮放置在页⾯右中部位置. 这时候的计算是:var n_half_height = window.screen.height / 2;将这个值赋给按钮的top属性.然后如果⽤户滚动的时候, 位置肯定是保持不变的, 这时候的计算应该是var n_stop = e.target.scrollingElement.scrollTop; //获取scrollTop的⾼度var n_top = n_stop + n_half_height;//得到位置这是e 对象是onsroll⾥的参数event. 这⾥我使⽤的是⾕歌浏览器.其他浏览器未测试. 如果需要兼容, ⼤家可以处理⼀下.每滚动都得计算其⾼度, 所以这个应该是放⼊在onscroll事件中.然后,将这个值赋给按钮的top属性.当然不要忘记⼀件事, 就是scrollTop为0的时候, 按钮不需要显⽰. ⼤于0的时候, 得让按钮显⽰. 前⾯讲过我们⽤visibility这个属性来控制的.这样代码就完整了.Javascript完整代码var ele_body = document.body;var ele_top = document.getElementsByClassName("top")[0];var n_half_height = window.screen.height / 2;ele_top.style.top = n_half_height + "px";window.onscroll = function (e) {var n_stop = e.target.scrollingElement.scrollTop;if (n_stop === 0 ) {ele_top.style.visibility = "hidden";}else {ele_top.style.visibility = "visible";}var n_top = n_stop + n_half_height ;ele_top.style.top = n_top + "px";}最后的效果展⽰：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助。

js中scrolltop的用法

js中scrolltop的用法

在JavaScript中，scrollTop属性用于获取或设置一个元素（通常是整个文档或某个特定元素如div）的垂直滚动位置。

这个属性指示了元素内容顶部到其可见部分顶部之间的距离（即滚动了多少像素）。

以下是scrollTop的基本用法：获取滚动位置：对于整个窗口：Javascript// 获取当前窗口的垂直滚动位置var scrollTop = window.pageYOffset ||document.documentElement.scrollTop;console.log(scrollTop); // 输出当前滚动条从顶部滚动的距离（单位：像素）对于某个特定元素：Javascript// 获取某个元素（例如id为myElement的div）的滚动位置var element = document.getElementById('myElement');var scrollTopOfElement = element.scrollTop;console.log(scrollTopOfElement);设置滚动位置：让整个窗口滚动到指定位置：Javascript// 将窗口滚动到垂直方向100像素的位置window.scrollTo(0, 100); // 第一个参数是水平偏移量，第二个参数是垂直偏移量// 或者直接设置scrollTop属性window.scrollTo({ top: 100, left: 0, behavior: 'smooth' }); // 使用平滑滚动效果（取决于浏览器支持）让某个元素滚动到指定位置：Javascript// 让id为myElement的元素内部滚动条滚动到100像素的位置var element = document.getElementById('myElement'); element.scrollTop = 100;监听滚动事件：Javascript// 当窗口滚动时执行某些操作window.addEventListener('scroll', function(event) { var currentScrollPos = window.pageYOffset ||document.documentElement.scrollTop;if (currentScrollPos > someThreshold) {// 如果滚动超过某个阈值，执行相应操作}});请注意，由于浏览器兼容性问题，在处理scrollTop时可能需要检查不同的属性以确保跨浏览器兼容性。

javascriptscrollTop正解使用方法

javascriptscrollTop正解使用方法
今天特地花了一点时间整理了下heighttop的区别本篇主要以chrome为准可能各个浏览器之间还是有一些区别需要的朋友可以参考下
javascriptscrollTop正 解 使 用 方 法
javascript scrollTop 获取滚动条相对于其顶部的偏移（如制作自动显示隐藏的“返回顶部”按钮）。在实际应用中经常会遇到以 下问题： document.documentElement.scrollTop在Chrome里总为0 document.body.scrollTop 在IE和firefox里总为0
完美的获取scrollTop 赋值简写 ：
复制代码 代码如下:
var scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;
1、各浏览器下 window.pageYOffset/document.documentElement.scrollTop/document.body.scrollTop的差异 示例：
复制代码 代码如下:
window.scroll(0,100) console.log(“window.pageYOffset:”+window.pageYOffset) console.log(“document.documentElement.scrollTop:”+document.documentElement.scrollTop) console.log(“document.body.scrollTop:”+document.body.scrollTop)
IE6/7/8： doctype： window.pageYOffset：undefined document.documentElement.scrollTop:100 document.body.scrollTop：0

js返回网页顶部scrollTop用法及window.onscroll事件

js返回网页顶部scrollTop用法及window.onscroll事件

js返回网页顶部scrollTop用法及window.onscroll事件document.body.scrollTop用法网页可见区域宽：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.screenTop;网页正文部分左：window.screenLeft;屏幕分辨率的高：window.screen.height;屏幕分辨率的宽：window.screen.width;屏幕可用工作区高度：window.screen.availHeight;屏幕可用工作区宽度：window.screen.availWidth;scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标offsetParent 属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由offsetParent 属性指定的父坐标的计算左侧位置offsetTop:获取对象相对于版面或由offsetTop 属性指定的父坐标的计算顶端位置event.clientX 相对文档的水平座标event.clientY 相对文档的垂直座标event.offsetX 相对容器的水平坐标event.offsetY 相对容器的垂直坐标document.documentElement.scrollTop 垂直方向滚动的值event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量Post by molong on 2009-05-19 11:57 PM #1要获取当前页面的滚动条纵坐标位置，用：document.documentElement.scrollTop;而不是：document.body.scrollTop;documentElement 对应的是html 标签，而body 对应的是body 标签。

js实现刷新页面后回到记录时滚动条的位置【两种方案可选】

js实现刷新页面后回到记录时滚动条的位置【两种方案可选】

js实现刷新页⾯后回到记录时滚动条的位置【两种⽅案可选】当div中绑定数据，给它⼀个属性overflow-y: scroll，添加长度⼤⼩，使其能够出现滚动条；每次刷新的时候滚动条总是会出现在最上⽅，这使我很头疼，经过查阅⽹上资料，返现两种⽅法可⾏。

如下：第⼀种⽅案将上⼀个页⾯的div的scrolltop距离长度记录在cookie中，然后通过js调整刷新页⾯时的长度记录，代码如下：js代码：<script>var _h = 0;function SetH(o) {_h = o.scrollTopSetCookie("a", _h)}window.onload = function () {document.getElementById("x").scrollTop = GetCookie("a");//页⾯加载时设置scrolltop⾼度}function SetCookie(sName, sValue) {document.cookie = sName + "=" + escape(sValue) + "; ";}function GetCookie(sName) {var aCookie = document.cookie.split("; ");for (var i = 0; i < aCookie.length; i++) {var aCrumb = aCookie[i].split("=");if (sName == aCrumb[0])return unescape(aCrumb[1]);}return 0;}</script>html中代码如下：<div id="x" style="height: 200px; overflow: scroll" onscroll="SetH(this)"><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>第⼆种⽅案1.通过div的onscroll事件记录滚动条的scrollTop值，设置到document.cookie2.页⾯加载时再读取document.cookie的值，设置给div的scrollTopjs代码实现：<script type="text/javascript">function KeepScrollBar() {var scrollPos;if (typeof window.pageYOffset != 'undefined') {scrollPos = window.pageYOffset;}else if (typeof document.body != 'undefined') {scrollPos = document.getElementById('divContent').scrollTop;}document.cookie = "scrollTop=" + scrollPos;}window.onload = function (){if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/);document.getElementById('divContent').scrollTop = parseInt(arr[1]);}}</script>html:<div class="content" data-role="tab-content" data-id="course-a" runat="server" id="divContent" style="height: 365px; overflow-y: scroll" onscroll= "KeepScrollBar()"> <p> 1</p><p> 2</p><p> 3</p><p> 4</p><p> 5</p><p> 6</p><p> 7</p><p> 8</p><p> 9</p><p> 10</p><p> 11</p><p> 12</p><p> 13</p><p> 14</p><p> 15</p><p> 16</p></div>以上就是本⽂的全部内容，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，同时也希望多多⽀持！。

两种js监听滚轮事件的实现方法

两种js监听滚轮事件的实现方法

两种js监听滚轮事件的实现⽅法
前段时间在写前端的时候，需要监听浏览器的滚轮事件
⽹上查了⼀下，找到两种监听滚轮事件的⽅法：
⼀、原⽣js通过window.onscroll监听
//window.onscroll = function() {//为了保证兼容性，这⾥取两个值，哪个有值取哪⼀个 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//scrollTop就是触发滚轮事件时滚轮的⾼度
}
⼆、Jquery通过$(window).scroll()监听
$(window).scroll(function(){//为了保证兼容性，这⾥取两个值，哪个有值取哪⼀个 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //scrollTop就是触发滚轮事件时滚轮的⾼度});
监听到了滚轮事件，就可以实时地获取到滚轮的⾼度，通过判断滚轮⾼度等等⼀些流程控制，可以实现⼀些基于滚轮的特效，如：滚轮到底时异步加载数据、滚轮⾼度为0时头部固定⽽到⼀定⾼度时头部fixed浮动等等⼀些特效
以上这篇两种js监听滚轮事件的实现⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

js实现楼层导航功能

js实现楼层导航功能

js实现楼层导航功能图如下所⽰：1.点击跳转到相应区域：页⾯scroll掉的距离 = ⽬标板块在⽂档中的垂直坐标 - 起始板块（⽬标位置）到视图顶部的距离； document.body.scrollTop = scrollLength; document.documentElement.scrollTop = scrollLength;2.滚动滚动条时对应的导航链接被激活每个板块的导航链接对应⼀个长度区间，当滚动条滚动调的长度落在该区间时，该导航条则被选中。

区间范围为当前板块的scrollTop值（包含）~下⼀板块的ScrollTop值（不包含）。

例如：第⼀板块的区间为0~第⼆板块的scrollTop值（即第⼀板块的⾼度），当滚动条滚动的距离落在该区间时，则第⼀个链接激活。

如何确定区间？将链接倒叙排列，依次循环判断，第⼀个（滚动条滚动的距离>区间最⼩值）成⽴的链接即为激活链接。

var currIndex=0;window.onscroll = function () { var $cptop = $('.cp-top'); var scrollLength = document.documentElement.scrollTop || document.body.scrollTop; //滚动条滚动的距离 var list_area = _.map($('#area li.group'), function (item, index) { return { top: item.offset().top, index: index }; }); //所有的板块 list_area = _.sortBy(list, function (item) { return -item.index; }); //倒序 var reachedArea = _.find(list_area, function (item) { return scrollLength >= item.top; }); //滚动的距离⼤于该区间的最⼩top值 if (currIndex != reachedArea.index) { currIndex = reachedArea.index; $(".navField li").removeClass('selected'); $(".navField li").eq(reachedField.index).addClass('selected'); }}以上就是本⽂的全部内容，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，同时也希望多多⽀持！。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

js返回网页顶部scrollTop用法及window.onscroll事件
document.body.scrollTop用法
网页可见区域宽：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.screenTop;
网页正文部分左：window.screenLeft;
屏幕分辨率的高：window.screen.height;
屏幕分辨率的宽：window.screen.width;
屏幕可用工作区高度：window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;
scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
Post by molong on 2009-05-19 11:57 PM #1
要获取当前页面的滚动条纵坐标位置，用：
document.documentElement.scrollTop;
而不是：
document.body.scrollTop;
documentElement 对应的是html 标签，而body 对应的是body 标签。

在标准w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替; 如果你想定位鼠标相对于页面的绝对位置时，你会发现google里面1000篇文章里面有999.99篇会让你使用event.clientX+document.body.scrollLeft，event.clientY+document.body.scrollTop，如果你发现你的鼠标定位偏离了你的想象，请不要奇怪，这是再正常不过的事情。

ie5.5之后已经不支持document.body.scrollX对象了。

所以在编程的时候，请加上这样的判断
if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
top=document.body.scrollTop;
left=document.body.scrollleft;
}
if (document.documentElement && document.documentElement.scrollTop &&
document.documentElement.scrollLeft)
{
top=document.documentElement.scrollTop;
left=document.documentElement.scrollLeft;
}
原生window.onscroll事件
var isChrome = erAgent.toLowerCase().match(/chrome/) != null,
top;
if(isChrome){
bottomNav.style.position = "absolute";//("position","absolute")
window.onscroll = function(){
if (document.body){
top=document.body.scrollTop;
}
else if(document.documentElement)
{
top=document.documentElement.scrollTop;
}
bottomNav.style.top = 150+top+"px";
}
}else{
bottomNav.style.postion = 'fixed';
}。