JS返回顶部的代码 - 360文档中心

JS返回页面顶部代码

三款简单的JS返回页面顶部代码Hanent整理本文介绍三款简单的返回页面顶部代码，可以使用简单的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返回页面顶部代码本文介绍三款简单的返回页面顶部代码，可以使用简单的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函数加一句给停止掉。

Elevator.js模拟电梯运行的“返回顶部”

Elevator.js：模拟电梯运行的“返回顶部”“返回顶部”按钮已成为绝大多数网站必备的一个重要元素，它的样式及实现方法也各有千秋。

本文将介绍一个带在电梯真实音乐的“返回顶部”JS插件：Elevator.js。

Elevator.js通过添加电梯音乐，使网页在返回顶部过程中犹如电梯向上运行，到达目的地后，并伴有“到达”的提示音（Demo展示）。

使用介绍：Elevator.js是一个独立的标准JS库，并未借助JQuery之类的其他JS库，使用起来相当方便。

元素的所有样式均可自行定义。

1.首先需要创建Elevator对像，为其添加音乐子元素。

代码如下：1.<script>2.// Elevator script included on the page, already.3.4.window.onload = function() {5.var elevator = new Elevator({6.mainAudio: '/src/to/audio.mp3',7.endAudio: '/src/to/end-audio.mp3'8.});9.}10.11.// You can run the elevator, by calling.12.elevator.elevate();13.</script>2.接着添加HTML元素，通过单击该元素，可实现页面返回顶部的功能，代码如下：1.<div class="elevator-button">Back to Top</div>2.3.<script>4.// Elevator script included on the page, already.5.6.window.onload = function() {7.var elevator = new Elevator({8.element: document.querySelector('.elevator-button'),9.mainAudio: '/src/to/audio.mp3',10.endAudio: '/src/to/end-audio.mp3'11.});12.}13.</script>3.如果你不想使用音效，可以将音效替换成页面返回顶部所需时间间隔。

JS实现回到页面顶部的五种写法（从实现到增强）

JS实现回到页⾯顶部的五种写法（从实现到增强）【1】锚点使⽤锚点链接是⼀种简单的返回顶部的功能实现。

该实现主要在页⾯顶部放置⼀个指定名称的锚点链接，然后在页⾯下⽅放置⼀个返回到该锚点的链接，⽤户点击该链接即可返回到该锚点所在的顶部位置<body style="height:2000px;"><div id="topAnchor"></div><a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到顶部</a></body>【2】scrollTop scrollTop属性表⽰被隐藏在内容区域上⽅的像素数。

元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值⼤于0，且表⽰元素上⽅不可见内容的像素宽度由于scrollTop是可写的，可以利⽤scrollTop来实现回到顶部的功能<body style="height:2000px;"><button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button><script>test.onclick = function(){document.body.scrollTop = document.documentElement.scrollTop = 0;}</script></body>【3】scrollTo() scrollTo(x,y)⽅法滚动当前window中显⽰的⽂档，让⽂档中由坐标x和y指定的点位于显⽰区域的左上⾓设置scrollTo(0,0)可以实现回到顶部的效果<body style="height:2000px;"><button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button><script>test.onclick = function(){scrollTo(0,0);}</script></body>【4】scrollBy() scrollBy(x,y)⽅法滚动当前window中显⽰的⽂档，x和y指定滚动的相对量只要把当前页⾯的滚动长度作为参数，逆向滚动，则可以实现回到顶部的效果<body style="height:2000px;"><button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button><script>test.onclick = function(){var top = document.body.scrollTop || document.documentElement.scrollTopscrollBy(0,-top);}</script></body>【5】scrollIntoView() Element.scrollIntoView⽅法滚动当前元素，进⼊浏览器的可见区域　该⽅法可以接受⼀个布尔值作为参数。

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实现回到页⾯顶部动画效果的简单实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

js返回顶部原理

js返回顶部原理JavaScript实现返回顶部原理主要涉及两个步骤：定位和滚动控制。

首先，需要将一个元素定位到页面的右下角，通常是一个小的按钮。

这个元素可以是一个图片，也可以是一个小的div。

当用户点击这个元素时，页面会滚动到顶部。

其次，需要控制页面的滚动行为。

当用户点击这个元素时，可以通过修改滚动条的位置来实现返回顶部的效果。

具体来说，可以将滚动条的位置设置为0，即页面顶部。

在JavaScript中，可以使用window对象的scrollTo 方法来控制页面的滚动位置。

例如，可以使用以下代码将页面滚动到顶部：javascript复制代码window.scrollTo(0, 0);如果要在页面加载时将元素定位到页面的右下角，可以使用CSS的定位属性。

例如，可以将元素的位置设置为fixed，并使用right和bottom 属性将其定位到页面的右下角：如果要在页面加载时将元素定位到页面的右下角，可以使用CSS的定位属性。

例如，可以将元素的位置设置为fixed，并使用right和bottom属性将其定位到页面的右下角：css复制代码.back-to-top { position: fixed; right: 20px;bottom: 20px; }然后，可以在HTML中添加一个具有该类的元素：position: fixed; right: 20px; bottom: 20px; }right: 20px; bottom: 20px; }然后，可以在HTML 中添加一个具有该类的元素：bottom: 20px; }然后，可以在HTML中添加一个具有该类的元素：}然后，可以在HTML中添加一个具有该类的元素：然后，可以在HTML中添加一个具有该类的元素：html复制代码<div class="back-to-top">返回顶部</div>最后，需要在JavaScript中添加事件监听器来处理用户的点击事件。

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实现置顶⽅法<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><script type="text/javascript">var timerfunction scrolltop(){document.getElementById('scrollmenu').style.top=document.documentElement.scrollTop || document.body.scrollTop || 0;//兼容写法。

页⾯具有DTD时，使⽤document.documentElement.scrollTop；没有指定DTD时使⽤document.body.scrollTop，所以⽤## || ## || 0 兼容timer=setTimeout("scrolltop()",1) //1毫秒调⽤⼀次scrolltop()⽅法}function stoptimer(){clearTimeout(timer)}</script></head><body onload="scrolltop()" onunload="stoptimer()"><div id="scrollmenu" style="position:absolute;"><b>置顶菜单</b><br /><a href="###">导航⼀</a><br /><a href="###">导航⼆</a><br /><a href="###">导航三</a><br /><a href="###">导航四</a><br /></div><p style="height:1000px">当页⾯出现滚动条的时候，菜单依然置顶<br />默认为左上⾓置顶，当为id="scrollmenu"的style添加属性right:0则右上⾓置顶</p> </body></html>。

基于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";}最后的效果展⽰：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助。

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

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

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>缺点：滚动效果不平滑，且在页⾯很长时点击返回顶部，未向上到达页⾯顶部⽆法再正常浏览页⾯；同上依旧是静态固定于页⾯底部，不⼀定能曝光在⽤户⾯前。

js返回上一页并刷新代码整理

js返回上⼀页并刷新代码整理复制代码代码如下:<a href="javascript:history.go(-1)">返回上⼀页</a><a href="javascript:location.reload()">重载页⾯，本地刷新</a><a href="javascript:history.go(-1);location.reload()">返回上⼀页重载页⾯，本地刷新</a>返回前⼆页并刷新的JS代码应该怎样写。

复制代码代码如下:history.go(-2);location.reload();复制代码代码如下:<a href="#" onclick="self.location=document.referrer;">返回</a>asp⾃动返回并刷新的⽅法：复制代码代码如下:response.Write("<script language=javascript>self.location=document.referrer;</script>")⼀般⽤于向⼀个页⾯提交action后返回前⼀页并刷新！1. Javascript 返回上⼀页history.go(-1), 返回两个页⾯: history.go(-2);2. history.back().3. window.history.forward()返回下⼀页4. window.history.go(返回第⼏页,也可以使⽤访问过的URL)例:<a href="javascript:history.go(-1);">向上⼀页</a>response.Write("<script language=javascript>")response.Write("if(!confirm('完成任务?')){history.back();}")response.Write("</script>")response.Write("<script language=javascript>history.go(-1);</script>")<a href="javascript:history.go(-1);">向上⼀页</a>页⾯跳转:onclick="window.location.href='list.aspx'"P.S.⼩技巧(JS引⽤JS):<script type=text/javascript></script>Javascript刷新页⾯的⼏种⽅法：1 history.go(0)2 location.reload()3 location=location4 location.assign(location)5 document.execCommand('Refresh')6 window.navigate(location)7 location.replace(location)8 document.URL=location.href如何输出刷新⽗窗⼝脚本语句1. this.response.write("<script>opener.location.reload();</script>");2. this.response.write("<script>opener.window.location.href = opener.window.location.href;</script>");3. Response.Write("<script language=javascript>opener.window.navigate(''你要刷新的页.asp'');</script>")JS刷新框架的脚本语句//如何刷新包含该框架的页⾯⽤<script language=JavaScript>parent.location.reload();</script>//⼦窗⼝刷新⽗窗⼝<script language=JavaScript>self.opener.location.reload();</script>(　或　<a href="javascript:opener.location.reload()">刷新</a> )//如何刷新另⼀个框架的页⾯⽤<script language=JavaScript>parent.另⼀FrameID.location.reload();</script>如果想关闭窗⼝时刷新或者想开窗时刷新的话，在<body>中调⽤以下语句即可。

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实现页面‎返回顶部的效‎果一般网页的下‎方都会放置一‎个置顶按钮, 尤其是页面底‎部没有导航的‎网页, 这样可以帮助‎访客重新找到‎导航或者重温‎一遍广告(想得真美). 随着近几年来‎ J AVASC‎RIPT 的应用日渐广‎泛,滑动效果无处‎不在, 于是我也跟跟‎风, 将置顶功能做‎成了滑动效果‎.后来为了更贴‎合物理特征, 改造做成了减‎速的滑动效果‎.首先说一下原‎理吧. 我们会获取滚‎动条到页面顶‎部的距离, 然后上移一定‎的距离; 再获取滚动条‎到页面顶部的‎距离, 上移一定的距‎离 ...JAVASC‎R IPT 代码:/*** 回到页面顶部‎* @param accele‎r ation‎加速度* @param time 时间间隔 (毫秒)**/functi‎o n goTop(accele‎r ation‎, time) {accele‎r ation‎= accele‎r ation‎|| 0.1;time = time || 16;var x1 = 0;var y1 = 0;var x2 = 0;var y2 = 0;var x3 = 0;var y3 = 0;if (docume‎n t.docume‎n tElem‎e nt) {x1 = docume‎n t.docume‎n tElem‎e nt.scroll‎L eft || 0;y1 = docume‎n t.docume‎n tElem‎e nt.scroll‎T op || 0;}if (docume‎n t.body) {x2 = docume‎n t.body.scroll‎L eft || 0;y2 = docume‎n t.body.scroll‎T op || 0;}var x3 = window‎.scroll‎X || 0;var y3 = window‎.scroll‎Y || 0;// 滚动条到页面‎顶部的水平距‎离var x = Math.max(x1, Math.max(x2, x3));// 滚动条到页面‎顶部的垂直距‎离var y = Math.max(y1, Math.max(y2, y3));// 滚动距离 = 目前距离 / 速度, 因为距离原来‎越小, 速度是大于 1 的数, 所以滚动距离‎会越来越小var speed = 1 + accele‎r ation‎;window‎.scroll‎T o(Math.floor(x / speed), Math.floor(y / speed));// 如果距离不为‎零, 继续调用迭代‎本函数if(x > 0 || y > 0) {var invoke‎F uncti‎o n = "goTop(" + accele‎r ation‎+ ", " + time + ")"; window‎.setTim‎e out(invoke‎F uncti‎o n, time);}}docume‎n t.docume‎n tElem‎e nt.scroll‎T op,docume‎n t.body.scroll‎T op, window ‎.s croll‎Y其实都是一样‎的,但它们只在某‎些浏览器中起‎作用. 至于那哪个在‎哪些浏览器起‎作用可以自己‎调试一下.HTML 代码:<a href="#" onclic‎k="goTop();return‎false;">TOP</a>。

js实现返回顶部效果

js实现返回顶部效果话不多说，请看代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS点击按钮到页⾯最底部/返回页⾯顶部代码</title><style type="text/css">#back-to-top{ position: fixed; bottom: 50px; right: 10%; }</style></head><body><div style="height: 3000px;"></div><div id="back-to-top"><a href="#top" rel="external nofollow" >返回顶部</a></div><script src="/jquery/2.0.0/jquery.js"></script><script type="text/javascript">$(document).ready(function(){//⾸先将#back-to-top隐藏$("#back-to-top").hide();//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失$(function () {$(window).scroll(function(){if ($(window).scrollTop()>100){$("#back-to-top").fadeIn(100);}else{$("#back-to-top").fadeOut(100);}});//当点击跳转链接后，回到页⾯顶部位置$("#back-to-top").click(function(){$('body,html').animate({scrollTop:0},"speed");return false;});});});</script></body></html>以上就是本⽂的全部内容，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，同时也希望多多⽀持！。

a超链接之返回顶部的两种实现方法

a超链接之返回顶部的两种实现⽅法1.通过css实现：为页⾯顶部如body或者⾃⼰设置的盒⼦等加上唯⼀id属性<body id="id">....<a href="#id">返回顶部</a>2.js实现通过设置标签滚动位置判断document.body.scrollTop=0;<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.cs_top{position: fixed;right: 10px;bottom: 10px;height: 60px;width: 60px;background-color: darkgray;opacity: 0.5;}.js_top{position: fixed;right: 10px;bottom: 120px;height: 60px;width: 60px;background-color: rebeccapurple;opacity: 0.5;}.hide{display: none;}#content{height:960px;width: 100%;}#content:before{content: 'top';display: block;}body:after{content: 'end';display: block;}</style><script></script></head><body onscroll="Func();"><div id="content"><p>fdffa</p><p>fdffa</p><p>fdffa</p><p>fdffa</p><p>fdffa</p><p>fdffa</p><p>fdffa</p><p>fdffa</p><p>fdffa</p></div><div class="cs_top"><a href="#content">返回顶部</a></div><div class="js_top hide"><a href="javascript:void(0);" onclick="GoTop();">返回顶部</a></div></body></html><script src="../02js拾遗/jquery.js"></script><script>function Func(){var scrollTop=document.body.scrollTop;var ele=document.getElementsByClassName('js_top')[0];if (scrollTop>50){ele.classList.remove('hide');}else{ele.classList.add('hide');}}function GoTop(){document.body.scrollTop=0;}</script>View Code。

js小效果：返回顶部scrollTop。滚屏：animate

js⼩效果：返回顶部scrollTop。

滚屏：animate返回顶部：（scroll 滚屏事件，如果超出第⼀屏，显⽰返回顶部的按钮）<div id="gotop" onclick="javascript:scroll(0,0);"><img src="images/top33x33.png"></div><style type="text/css">#gotop{display:none;position:fixed;right:5px;bottom:4rem;width:33px;height:33px;z-index:999;}</style><script type="text/javascript" src="/jquery/1.11.3/jquery.min.js"></script><script type="text/javascript">$(function(){$(window).scroll(function() {//滚屏var scrollTop = $(document.body).scrollTop();//滚动⾼度var windowH = $(window).height();//页⾯⾼度if(scrollTop>windowH){$("#gotop").show();}else{$("#gotop").hide();}});});</script>屏幕滚动到某个像素处：2015-11-18var scrollTop = $(this).offset().top;$(document.body).scrollTop(scrollTop-50);返回顶部、返回页⾯顶部： 2016-4-22$('.sidebarnav .sbnl-gotop').click(function(){//回到顶部$(document.body).animate({scrollTop: '0px'}, 800);});侧导航的显⽰隐藏：（要求，滚屏超过100px后，显⽰侧导航。

js返回上上级页面的方法

js返回上上级页面的方法使用JavaScript返回上上级页面的方法在Web开发中，我们经常需要在页面之间进行跳转。

有时候，我们需要返回上一级页面，但有时候我们可能需要返回上上级页面。

那么，在JavaScript中，我们如何实现返回上上级页面的功能呢？在JavaScript中，我们可以使用window对象的history属性来实现页面的跳转和返回操作。

history对象保存着用户在浏览器窗口中访问过的URL地址，它提供了一些方法来操作浏览器的历史记录。

要返回上上级页面，我们需要使用history对象的go方法，并指定要返回的页面的相对位置。

具体来说，我们可以使用history.go(-2)来返回上上级页面。

其中，-2表示返回两个页面，-1表示返回上一级页面，0表示刷新当前页面，1表示前进到下一级页面，以此类推。

下面是一个示例代码，演示了如何使用JavaScript返回上上级页面的方法：```<!DOCTYPE html><html><head><title>返回上上级页面</title><script>function goBack() {window.history.go(-2);}</script></head><body><h1>返回上上级页面</h1><button onclick="goBack()">返回</button></body></html>```在上面的示例代码中，我们定义了一个goBack函数，当点击按钮时，会调用该函数来返回上上级页面。

在函数中，我们使用window.history.go(-2)来实现返回上上级页面的操作。

需要注意的是，如果当前页面的历史记录不足以返回上上级页面，那么调用history.go(-2)将没有效果。

JSP返回上一页的几种方法

JSP返回上一页的几种方法1. <a href="javascript:history.back(-1)">返回上一页</a>2. <a href="javascript:;" onClick="javascript:history.back(-1);">返回上一页</a>3.如果是用按钮做的话就是：<input type="button" name="Submit" onclick="javascript:history.back(-1);" value="返回上一页">4.用图片做的话就是：<a href="javascript :;" onClick="javascript :history.back(-1);"><img src="图片路径" border="0" title="返回上一页"></a>5.<a href="javascript:history.go(-1);">向上一页</a>, 返回两个页面: history.go(-2);页面跳转:onclick="window.location.href='list.php'"6.用js实现页面自动返回到上一页几秒钟后自动返回上一页代码:（加入两个head间，3000表示3秒）<script type="text/javascript">setTimeout("history.go(-1)", 3000); </script><SCRIPT language=javascript>function go(){window.history.go(-1);}setTimeout("go()",3000);</SCRIPT>。

javascript实现博客园页面右下角返回顶部按钮-电脑资料

javascript实现博客园页面右下角返回顶部按钮-电脑资料这篇文章主要介绍了使用javascript实现博客园页面右下角返回顶部按钮的思路及源码，非常不错，这里推荐给小伙伴们博客园中很多博友的博客中在Page右下角都有个图标,不论屏幕怎么拉伸，都始终停留在右下角，。

点击后页面置顶。

后面想想写一个Demo来实现这种效果吧。

一. 图标右下角固定.1.SS 里面提供了4中布局方式. 其中fixed表示绝对定位元素。

所以我们选择使用fixed来实现图标固定.absolute生成绝对定位的元素，相对于static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static默认值。

没有定位，元素出现在正常的流中（忽略top, bottom, left, right 或者 z-index 声明）。

inherit规定应该从父元素继承 position 属性的值。

2.定代码如下。

Button按钮将始终置于屏幕右下角。

不论是拖动上下精度条还是拉伸浏览器窗口大小.代码如下:#myTopBtn{bottom: 5px;right: 5px;position:fixed;}二. 实现点击后回到页面最上角.1. 要想回到屏幕最上角就得小了解如何通过JavaScript还操作拖动条的上下移动.JavaScript提供了scrollby和scroll方法.代码如下:window.scrollBy(0,-30) //屏幕上移30像素点window.scroll(0,0) // 屏幕回到最上角2. 上面已经提到了如何移动拖动条，那么如何实现按照一定的速度移动到page页顶部呢。