html返回顶部的图标,实现返回顶部（Back to top）的JavaScript

我们在很多网站比如新浪微博的右下角都能看到“返回顶部”的功能，那么它是如何实现的呢？

功能：

1、点击“返回顶部”(Back to top)链接跳转到页面的顶部(一屏)

2、在较短的页面中不显示，而在多屏的长页面会自动显示出来

3、支持IE8及其以上浏览器，Chrome和Safari等就更不必说了

4、不支持IE6(早该淘汰了)

这里介绍的是开源的lee-goToTop

使用方法：

demo.html

返回顶部-Demo

向下拖动滚动条(进入第二屏)，右下角会出现“返回顶部”图标

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

中间部分自己加

Item 96

Item 97

Item 98

Item 99

Item 100

  

to-top.css

* html, * html body{

background-image:url(about:blank);

background-attachment:fixed;

}

#toTop{

position:fixed;

_position:absolute;

right:30px;

bottom:40px;

_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-40);

cursor:pointer;

display:none;

}

to-top.js

/*!

author: 李进

email: tjuking@gmail.com

blog: tjuking.iteye.com

time: 2012-12-06

*/

(function(win, doc){

//变量

var compatMode = doc.compatMode,

isChrome = win.navigator.userAgent.indexOf("Chrome") === -1 ? false : true,

scrollEle = compatMode === "BackCompat" || isChrome ? doc.body : doc.documentElement,

clientEle = compatMode === "BackCompat" ? doc.body : doc.documentElement,

toTopImg = doc.getElementById("toTop"),

rate = 0.6,

timeGap = 10;

//返回顶部图标的点击响应

toTopImg.onclick = function(){

var moveInterval = setInterval(moveScroll, timeGap);

function moveScroll(){

var scrollTop = scrollEle.scrollTop;

if(scrollTop === 0){

clearInterval(moveInterval);

return ;

}

scrollEle.scrollTop = scrollTop * rate;

}

};

//滚动时判断是否显示返回顶部图标

win.onscroll = function(){

var display = toTopImg.style.display;

if(scrollEle.scrollTop > clientEle.clientHeight){

if(display !== "block"){

toTopImg.style.display = "block";

}

}else{

if(display !== "none"){

toTopImg.style.display = "none";

}

}

};

})(window, document);

可以在js文件中修改弹性值rate、timeGap以满足定制化需求，例如：

rate = 0.8; //默认 rate = 0.6

注：这种方法采用的是原生javascript实现的，如果想使用jQuery，请看另一篇文章《jQuery实现“返回顶部”的功能(支持IE6)  》