您的位置:首页 > Web前端 > JavaScript

js返回顶部代码

2012-04-01 15:47 369 查看


直接贴代码:(注:要先加载jquery)

转载自:http://www.fkblog.org/blog207

js返回顶部


实例查看:http://www.fkblog.org/demo/javascript/back-to-top.html

相关文章:js侧栏置顶置底代码查看:js侧栏置顶置底代码
<div style="display:none;" class="back-to" id="toolBackTop">
<a title="返回顶部" onclick="window.scrollTo(0,0);return false;" href="#top" class="back-top">
返回顶部</a>
</div>

<style>

.back-to {bottom: 35px;overflow:hidden;position:fixed;right:10px;width:50px;z-index:999;}
.back-to .back-top {background: url("back-top.png") no-repeat scroll 0 0 transparent;display: block;float: right;height:50px;margin-left: 10px;outline: 0 none;text-indent: -9999em;width: 50px;}
.back-to .back-top:hover {background-position: -50px 0;}
</style>
<script type="text/javascript">
$(document).ready(function () {
var bt = $('#toolBackTop');
var sw = $(document.body)[0].clientWidth;

var limitsw = (sw - 1060) / 2 - 40;
if (limitsw > 0){
limitsw = parseInt(limitsw);
bt.css("right",limitsw);
}

$(window).scroll(function() {
var st = $(window).scrollTop();
if(st > 30){
bt.show();
}else{
bt.hide();
}
});
})
</script>
<h5><span style="color: #339966;">
</span></h5>
<div id="toolBackTop" class="back-to" style="display: none;"><a class="back-top" title="返回顶部" onclick="window.scrollTo(0,0);return false;" href="#top"> 返回顶部</a></div>
<script type="text/javascript">// <![CDATA[
$(document).ready(function () {

var bt = $('#toolBackTop');

var sw = $(document.body)[0].clientWidth;

var limitsw = (sw - 1060) / 2 - 40;

if (limitsw > 0){

limitsw = parseInt(limitsw);

bt.css("right",limitsw);

}

$(window).scroll(function() {

var st = $(window).scrollTop();

if(st > 30){

bt.show();

}else{

bt.hide();

}

});

})
// ]]></script>


js返回顶部实例查看:http://www.fkblog.org/demo/javascript/back-to-top.html

相关文章:js侧栏置顶置底代码查看:js侧栏置顶置底代码

图片素材:



转载请注明:FKBlog » js
返回顶部代码
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: