1.js事件
<a class="back-top" href="#top" οnclick="window.scrollTo(0,0);return false;" title="返回顶部"style="position:fixed;right:0px;">返回顶部</a>
也可采用如下写法
<a href="javascript:;" class="new_floating_top new_floating_top2" id="return_top"style="position:fixed;right:0px;">回顶部</a>
2.利用锚点
<a class="back-top" href="#" title="返回顶部">返回顶部</a>
3.返回顶部
//< html
<a href="#top" title="回到顶部" class="goTop" id="php-go-top" style="">回到顶部</a>
//< css
/*回顶部*/ .goTop{padding:44px 0 6px; position:fixed; *position:absolute; bottom:60px; height:24px; width:62px; text-align:center; line-height:24px; font-size:12px; background:url(../img/public/elems.png) no-repeat 0 -88px; color:#524d4d; position:fixed; _position:absolute; right:20px;} .goTop:hover{background-position:-63px -88px; color:#dd7f1b; text-decoration:none;}
//< js
var _goTop = function(id) {
//< 完美解决ie6不支持position:fixed的bug
var _isIE6 = !-[-1,] && !window.XMLHttpRequest;
if(_isIE6) {
var domTxt = '(document).documentElement';
var ie6CSS = 'position:absolute;left:expression(eval(' + domTxt + '.scrollLeft+' + domTxt + '.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0)-(parseInt(this.currentStyle.right,10)||20));top:expression(eval(' + domTxt + '.scrollTop+' + domTxt + '.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))-(parseInt(this.currentStyle.bottom,10)||60))';
//< 修正IE6振动bug
$('body').css({'background-image':'url(about:blank)','background-attachment':'fixed'});
//< ie6下模拟支持position:fixed
$(id).attr('style', ie6CSS + ';display:none;');
}
var state = {
isvisible : false, //< 回到顶部 初始状态
shouldvisible : false //< 回到顶部 目标状态
};
var toggleControl = function() {
var scrollTop = $(window).scrollTop();
state.shouldvisible = (scrollTop > 0) ? true : false;
if(state.shouldvisible && !state.isvisible) {
$(id).show();
state.isvisible = true;
} else if(state.shouldvisible == false && state.isvisible) {
$(id).hide();
state.isvisible = false;
}
};
var $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
$(id).click(function() {
$body.animate({scrollTop: 0}, {duration: 500});
return false;
});
toggleControl();
$(window).bind('scroll resize', function(e) {
/*var scrollTop = $(window).scrollTop();
var windowHeight = $(document).height();
if(scrollTop > windowHeight / 2) {
alert(scrollTop + ' ' + windowHeight);
alert(scrollTop + '>' + windowHeight / 2);
}*/
toggleControl();
});
};
_goTop('#php-go-top');