JQuery返回置顶
html部分
<div class="wrap"></div>
<div id="goTopBtn" class="goTopBtn"><a href="javascript:;" title="我要上去!" alt="回到顶部" /></a></div>
<div id="goTopBtn" class="goTopBtn"><a href="javascript:;" title="我要上去!" alt="回到顶部" /></a></div>
css部分
<style type="text/css">
body { height: 3600px;}
.wrap { width:980px; height:1200px; border:1px #000 solid; margin:0 auto; }
.goTopBtn { position:fixed;display:none; text-align:center; line-height:30px; width:30px; bottom:35px; height:33px; font-size:12px; cursor:pointer;}
/* IE6 底部固定 */
* html .goTopBtn {position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
body { height: 3600px;}
.wrap { width:980px; height:1200px; border:1px #000 solid; margin:0 auto; }
.goTopBtn { position:fixed;display:none; text-align:center; line-height:30px; width:30px; bottom:35px; height:33px; font-size:12px; cursor:pointer;}
/* IE6 底部固定 */
* html .goTopBtn {position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
/* html,* html body /*
修正IE6振动bug */{background-image:url(about:blank); /*用浏览器空白页面作为背景*/ background-attachment:fixed; /* prevent screen flash in IE6 确保滚动条滚动时,元素不闪动*/}
</style>
JQ部分
$(function(){
$(window).scroll(function () {
if($(window).scrollTop() >= 300)//距离顶部多少高度显示按钮
{
$('#goTopBtn').slideDown(200);
}else
{
$('#goTopBtn').slideUp(200);
}
});
$('#goTopBtn').click(function(){
$('body,html').animate({scrollTop:0},500)
});
//按钮定位
var win_width= $(window).width(); //窗口宽度
var content_width= $('.wrap').width(); //容器宽度
var topbtn_width= $('#goTopBtn').width(); //按钮宽度
//alert([win_width - content_width]/2);
//距离主体部分的右侧距离
var topbtn_posi = ([win_width - content_width ]/2 - topbtn_width - 10);
$('#goTopBtn').css({'right':topbtn_posi});
})
$(window).scroll(function () {
if($(window).scrollTop() >= 300)//距离顶部多少高度显示按钮
{
$('#goTopBtn').slideDown(200);
}else
{
$('#goTopBtn').slideUp(200);
}
});
$('#goTopBtn').click(function(){
$('body,html').animate({scrollTop:0},500)
});
//按钮定位
var win_width= $(window).width(); //窗口宽度
var content_width= $('.wrap').width(); //容器宽度
var topbtn_width= $('#goTopBtn').width(); //按钮宽度
//alert([win_width - content_width]/2);
//距离主体部分的右侧距离
var topbtn_posi = ([win_width - content_width ]/2 - topbtn_width - 10);
$('#goTopBtn').css({'right':topbtn_posi});
})
定位部分可自己定义
浙公网安备 33010602011771号