返回顶部用js代码怎么实现（点击网页底部的top按钮直接回到网页顶部,怎么做用js怎么表达）

看你是否需要到顶部的动画效果，如果不需要动画效果而是直接回到网页顶部，那么根本不需要去使用JS。如：在页面的最顶端设置锚点 《a name=“top“》《/a》然后在回到顶部的top按钮加连接 《a href=“#top“》top《/a》 就可以了

当然JS也能实现，主要是给scrolltop赋值为0，从而回到页面顶部。

可以通过html的锚标签来实现《html》 《head》《/head》 《body》 《a id=“top“》《/a》 ......................... 《!--在返回顶部按钮处写--》 《a href=“#top“》返回顶部《/a》 《/body》《/html》js的写法页面上的返回顶部按钮《button type=“button“ onclick=“GoTop()“》《/button》js中的写法function GoTop(){ if (document.body && document.body.scrollTop && document.body.scrollLeft) { document.body.scrollTop=0; } if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft) { document.documentElement.scrollTop=0; }}

网站的网页中都有返回顶部的功能，就是当用户访问网页时，可以迅速的返回顶部。也许会有人觉得这个功能很简单，没有什么说的，但据我目前所知，就有五种方法实现这个功能。而且不同的方法能实现的效果也是有所不同的。下面介绍下这些方法网页中“返回顶部”的html代码有好几种不同的编写方式：

1、简单的脚本可实现此功能：

代码：

《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》

《html xmlns=“http://www.w3.org/1999/xhtml“》

《head》

《meta http-equiv=“Content-Type“ content=“text/html; “ /》

《title》返回顶部《/title》

《style type=“text/css“》

body{height:1000px;}

《/style》

《/head》

《body》

《div style=“height:800px; width:800px;“》《/div》

《a href=“javascript:scroll(0,0)“》返回顶部《/a》

《/body》

《/html》

2、采用JS实现返回顶部：

《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》

《html xmlns=“http://www.w3.org/1999/xhtml“》

《head》

《meta http-equiv=“Content-Type“ content=“text/html; charset=gb2312“ /》

《title》返回顶部《/title》

《style type=“text/css“》

body{height:1000px;}

《/style》

《/head》

《body》

《div style=“height:800px; width:800px;“》《/div》

《script src=“js/gototop.js“》《/script》

《div class=“back-top-container“ id=“gotop“》

《div class=“yb_conct“》

《div class=“yb_bar“》

《ul》

《li class=“yb_top“》返回顶部《/li》

《/ul》

《/div》

《/div》

《/div》

《/body》

《/html》

3、利用锚点返回顶部：

《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》

《html xmlns=“http://www.w3.org/1999/xhtml“》

《head》

《meta http-equiv=“Content-Type“ content=“text/html; charset=gb2312“ /》

《title》返回顶部《/title》

《/head》

《body》

《a href=“#5F“》顶部《/a》 

《div style=“height:300px; width:300px;“》《/div》

《a name=“5F“》返回顶部《/a》

《/body》

《/html》

《input type=“button“ id=“btn“ value=“点击回到顶部“》document.getElementById(“btn“).onclick = function(){  document.body.scrollTop = 0;  document.documentElement.scrollTop = 0;}

实现原理：当页面加载的时候，把元素定位到页面的右下角，当页面滚动时，元素一直位于右下角，当用户点击的时候，页面回到顶部。要点一：document.documentElement.clientWidth || document.body.clientWidth； 获得可视区的宽度。后面是兼容chrome，前面是兼容其它浏览器。要点二：oTop.style.left = screenw - oTop.offsetWidth +“px“; 当页面加载时，让元素的位置位于页面最右边，用可视区的宽度减去元素本身的宽度。要点三：oTop.style.top = screenh - oTop.offsetHeight + scrolltop +“px“; 当页面滚动时，元素的Y坐标位置等于可视区的高度减去元素本身的高度，加上滚动距离。要点四：document.documentElement.scrollTop = document.body.scrollTop =0; 当点击元素时，让页面的滚动距离为0.写两个是为了兼容。参考：http://www.cnblogs.com/jingangel/archive/2012/03/08/2385939.html

《SCRIPT type=text/javascriptgoTopEx();《/SCRIPT在层div里加入这样的代码这个页面链接的详细JS代码是：《SCRIPT type=text/javascript src=“js/scrolltop.js“《/SCRIPT下面是JS代码：// JavaScript Documentfunction goTopEx(){var obj=document.getElementById(“goTopBtn“);function getScrollTop(){return document.documentElement.scrollTop;}function setScrollTop(value){document.documentElement.scrollTop=value;}window.onscroll=function(){getScrollTop()0?obj.style.display=““:obj.style.display=“none“;}obj.onclick=function(){var goTop=setInterval(scrollMove,10);function scrollMove(){

JS或者jquery设置滚动条回到顶部的方法：

返回顶部：设置为body的scrollTop为0     

滑动效果：animate（Jquery的自定义动画）

备注：returnTop为触发返回顶部的元素ID。

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

一、使用锚标记返回页面顶部 使用HTML锚标记最简单，就是看起来有点不好看，点击后会在地址栏显示这个锚标记，其它的倒没什么。 页面顶部放置： 《a name=“top“ id=“top“》《/a》 放置位置在《body》标签之后随便找个地方放都可以，只要靠近顶部即可。 页面底部放置： 《a href=“#top“ target=“_self“》返回顶部《/a》 二、使用Javascript Scroll函数返回顶部 scrooll函数用来控制滚动条的位置，有两种很简单的实现方式： 方式1： 《a href=“javascript:scroll(0,0)“》返回顶部《/a》 scroll第一个参数是水平位置，第二个参数是垂直位置，比如要想定位在垂直50像素处，改成scroll(0,50)就可以了。 三、使用Onload加上scroll功能实现动态返回顶部 1、首先在网页BODY标签结束之前加上： 《div id=“gotop“》返回顶部《/div》 2、再调用以下JS脚本部分给你个例子：《!DOCTYPE html》《html》《head》《meta charset=“utf-8“ /》《title》无标题文档《/title》《style》body{margin:0; padding:0}#to_top{width:30px; height:40px; padding:20px; font:14px/20px arial; text-align:center; background:#06c; position:absolute; cursor:pointer; color:#fff}《/style》《script》window.onload = function(){ var oTop = document.getElementById(“to_top“); var screenw = document.documentElement.clientWidth || document.body.clientWidth; var screenh = document.documentElement.clientHeight || document.body.clientHeight; oTop.style.left = screenw - oTop.offsetWidth +“px“; oTop.style.top = screenh - oTop.offsetHeight + “px“; window.onscroll = function(){ var scrolltop = document.documentElement.scrollTop || document.body.scrollTop; oTop.style.top = screenh - oTop.offsetHeight + scrolltop +“px“; } oTop.onclick = function(){ document.documentElement.scrollTop = document.body.scrollTop =0; }} 《/script》《/head》《body style=“height:1000px;“》《h1》返回顶部《/h1》《div id=“to_top“》返回顶部《/div》《/body》《/html》

你好！《script》lastScrollY=0;functionheartBeat(){vardiffY;if(document.documentElement&&document.documentElement.scrollTop)diffY=document.documentElement.scrollTop;elseif(document.body)diffY=document.body.scrollTopelse{/*Netscapestuff*/}percent=.1*(diffY-lastScrollY);if(percent》0)percent=Math.ceil(percent);elsepercent=Math.floor(percent);document.getElementById(“full“).style.top=parseInt(document.getElementById(“full“).style.top)+percent+“px“;lastScrollY=lastScrollY+percent;}suspendcode=“返回顶部“document.write(suspendcode);window.setInterval(“heartBeat()“,1);《/script》不这段代码加到你的html里，就可以了，如果觉得不美观，可以用图片代替“返回顶部”。如果对你有帮助，望采纳。

《html》《title》JS实现网页右下角浮动的“返回顶部”代码丨网页特效丨csrcode.cn《/title》《body》《script》var displayed=“《nobr》《b》《/b》《/nobr》“///////////////////////////Do not edit below this line////////////var logolink=’javascript:window.scrollTo(0,0)’var ns4=document.layersvar ie4=document.allvar ns6=document.getElementById&&!document.allfunction regenerate(){window.location.reload()}function regenerate2(){if (ns4)setTimeout(“window.onresize=regenerate“,400)}if (ie4||ns6)document.write(’《span id=“logo“ style=“position:absolute;top:-300;z-index:100“》’+displayed+’《/span》’)function createtext(){ //function for NS4staticimage=new Layer(5)staticimage.left=-300staticimage.document.write(’《a href=“’+logolink+’“》’+displayed+’《/a》’)staticimage.document.close()staticimage.visibility=“show“regenerate2()staticitns()}function staticit(){ //function for IE4/ NS6var w2=ns6? pageXOffset+w : document.body.scrollLeft+wvar h3=ns6? pageYOffset+h : document.body.scrollTop+hcrosslogo.style.left=w2crosslogo.style.top=h3}function staticit2(){ //function for NS4staticimage.left=pageXOffset+window.innerWidth-staticimage.document.width-28staticimage.top=pageYOffset+window.innerHeight-staticimage.document.height-10}function inserttext(){ //function for IE4/ NS6if (ie4)crosslogo=document.all.logoelse if (ns6)crosslogo=document.getElementById(“logo“)crosslogo.innerHTML=’《a href=“’+logolink+’“》’+displayed+’《/a》’w=ns6? window.innerWidth-crosslogo.offsetWidth-20 : document.body.clientWidth-crosslogo.offsetWidth-10h=ns6? window.innerHeight-crosslogo.offsetHeight-15 : document.body.clientHeight-crosslogo.offsetHeight-10crosslogo.style.left=wcrosslogo.style.top=hif (ie4)window.onscroll=staticitelse if (ns6)startstatic=setInterval(“staticit()“,100)}if (ie4||ns6){window.onload=inserttextwindow.onresize=new Function(“window.location.reload()“)}else if (ns4)window.onload=createtextfunction staticitns(){ //function for NS4startstatic=setInterval(“staticit2()“,90)}《/script》页面顶部《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《br》《/body》《/html》《p align=“center“》本特效由 《a href=“...网页特效《/a》丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。《/p》