js返回网页顶部scrollTop用法及window.onscroll事件
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的用法在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，记录下来。
发现还可以添加从快到慢的动画效果和随时下拉滚动条停⽌滚动的功能，参考了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 用法说明下面的演示中，外层元素的高度值是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滚到页⾯顶部<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返回页面顶部代码本文介绍三款简单的返回页面顶部代码，可以使用简单的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滚动条方法是用于控制网页中滚动条的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>缺点：滚动效果不平滑，且在页⾯很长时点击返回顶部，未向上到达页⾯顶部⽆法再正常浏览页⾯；同上依旧是静态固定于页⾯底部，不⼀定能曝光在⽤户⾯前。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 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';
}。