非插件简单实现WordPress返回顶部浮动图标代码

今天介绍返回顶部浮动图标代码。代码使用很简单,只需要将HTML代码,和jQuery代码放入到网页的尾部即可。另外你可能还需要找一张你自己喜欢的返回顶部图片,具体演示看本站。

HTML代码

<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>

jQuery代码

<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
        var bt = $('#toolBackTop');
        var sw = $(document.body)[0].clientWidth;
        var limitsw = (sw - 840) / 2 - 80;
        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>

[anyad]
本站图标下载:
[url]http://wentong.org/wp-content/themes/itheme/images/back-top.png[/url]
——-2011.11.14更新——–
另外一个图标:
非插件简单实现Wordpress返回顶部浮动图标代码

人吐槽 人点赞

猜你喜欢

发表评论

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:非插件简单实现WordPress返回顶部浮动图标代码