html网页中怎样实现“返回顶部”的效果？

将下面的代码保存成一个JS文件。然后在页面里调用。其中/backtotop.gif为返回顶部的图片。

function setCss(){var a=[]a.push(".back_to_top{display:nonewidth:50pxheight:50pxoverflow:hiddenright:40pxposition:fixed bottom:50px_position:absolute_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-134))}\n")a.push(".back_to_top a{display:inline-blockwidth:50pxheight:50pxoverflow:hiddenbackground:url(/backtotop.gif) 0px 0px no-repeat}\n")a.push(".back_to_top a:hover{background-position:-50px 0px}")try{var b=document.createStyleSheet()b.cssText=a.join("")}catch(c){var b=document.createElement("style")b.type="text/css"b.textContent=a.join("")document.getElementsByTagName("HEAD").item(0).appendChild(b)}}function createLink(){var a=document.createElement("div")a.id="JS_back_to_top"a.className="back_to_top"a.innerHTML='<a href="#" title="返回顶部"></a>'document.body.appendChild(a)}function GetPageScroll(){var b,aif(window.pageYOffset){a=window.pageYOffsetb=window.pageXOffset}else{if(document.documentElement&&document.documentElement.scrollTop){a=document.documentElement.scrollTopb=document.documentElement.scrollLeft}else{if(document.body){a=document.body.scrollTopb=document.body.scrollLeft}}}return{x:b,y:a}}if(window.attachEvent){window.attachEvent("onscroll",backToTop)}else{window.addEventListener("scroll",backToTop,false)}function backToTop(){if(GetPageScroll().y>300){document.getElementById("JS_back_to_top").style.display="block"}else{document.getElementById("JS_back_to_top").style.display="none"}}setCss()createLink()

1、纯js,无动画版本

[html] view plain copy

window.scrollTo(x-coord, y-coord)

[html] view plain copy

如：window.scrollTo(0,0)

2、纯js，带动画版本

生硬版：

[html] view plain copy

var scrollToTop = window.setInterval(function() {

var pos = window.pageYOffset

if ( pos >0 ) {

window.scrollTo( 0, pos - 20 )// how far to scroll on each step

} else {

window.clearInterval( scrollToTop )

}

}, 16)// how fast to scroll (this equals roughly 60 fps)

流畅版：

[html] view plain copy

(function smoothscroll(){

var currentScroll = document.documentElement.scrollTop || document.body.scrollTop

if (currentScroll >0) {

window.requestAnimationFrame(smoothscroll)

window.scrollTo (0,currentScroll - (currentScroll/5))

}

})()

3、jQuery,带动画版本

首先需要在顶部添加如下html元素：

[html] view plain copy

<span style="font-size:14px"><p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>

</span>

其中a标签指向锚点top，可以在顶部防止一个<a name="top"></a>的锚点，这样在浏览器不支持js时也可以实现返回顶部的效果了。

要想让返回顶部的图片显示在右侧，还需要一些css样式，如下：

[css] view plain copy

<span style="font-size:14px">/*returnTop*/

p#back-to-top{

position:fixed

display:none

bottom:100px

right:80px

}

p#back-to-top a{

text-align:center

text-decoration:none

color:#d1d1d1

display:block

width:64px

/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/

-moz-transition:color 1s

-webkit-transition:color 1s

-o-transition:color 1s

}

p#back-to-top a:hover{

color:#979797

}

p#back-to-top a span{

background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px

border-radius:6px

display:block

height:64px

width:56px

margin-bottom:5px

/*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/

-moz-transition:background 1s

-webkit-transition:background 1s

-o-transition:background 1s

}

#back-to-top a:hover span{

background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px

}

</span>

上面样式中的背景图片是雪碧图，下面提供两个单独的返回顶部图片方便朋友们使用：

有了html和样式，我们还需要用js控制返回顶部按钮，在页面滚动时渐隐渐现返回顶部按钮。

[html] view plain copy

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>

<script>

$(function(){

//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失

$(function () {

$(window).scroll(function(){

if ($(window).scrollTop()>100){

$("#back-to-top").fadeIn(1500)

}

else

{

$("#back-to-top").fadeOut(1500)

}

})

//当点击跳转链接后，回到页面顶部位置

$("#back-to-top").click(function(){

//$('body,html').animate({scrollTop:0},1000)

if ($('html').scrollTop()) {

$('html').animate({ scrollTop: 0 }, 1000)

return false

}

$('body').animate({ scrollTop: 0 }, 1000)

return false

})

})

})

</script>

---