js返回顶部代码

直接贴代码:(注:要先加载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 返回顶部代码

你可能感兴趣的:(js返回顶部代码)