返回页面顶部模块

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>

$( "#return_top"). click( function() {
scroll( 0, 0);
$( this). blur();
});

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');

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值