仿新浪微博返回顶部功能

11-15 | 夜光 | IT记录

一、加载jQuery库(要求1.4以上版本)

二、在jQuery后添加如下代码:

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/gotop.js"></script>

其中gotop.js文件内容如下:

(function() {
    var $backToTopFun = function() {
        var st = jQuery(document).scrollTop(), winh = jQuery(window).height();
        (st > 0) ? jQuery(".gotop").show() : jQuery(".gotop").hide();
        // IE6下的定位
        if (!window.XMLHttpRequest) {
            $backToTopEle.css("top", st + winh - 166);
        }
    };
    jQuery(document).ready(function() {
        jQuery(".gotoptxt").click(function() {
            jQuery("html, body").animate({
                scrollTop : 0
            }, 800);
        });
        jQuery(window).bind("scroll", $backToTopFun);
        $backToTopFun();
    });
})();

(3)在footer.php中添加如下代码

<div class="gotop">
	<div class="gotoptxt">返回顶部</div>
</div>

(4)在style.css文件中添加如下代码

/*go_top*/
.gotop{
	display:none;
	position:fixed;
	bottom:120px;
	left:50%;
}
.gotoptxt{
	width:18px;
	line-height:1.2;
	padding:5px 0;
	background-color:#000;
	color:#fff;
	font-size:12px;
	text-align:center;
	position:relative;
	left:485px;
	cursor:pointer;
	opacity:.6;
	filter:Alpha(opacity = 60);
}
本文标签:
本文链接: wordpress-back-to-top/
版权所有: 玻璃泉, 转载请注明本文出处。