主页 > 编程资料 > Javascript >
发布时间:2014-11-24 作者:网络 阅读:291次

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

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>

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

图片素材:返回顶部
关键字词: