WordPress滑动型“回到顶部”无插件实现

返回顶部按钮大家都不陌生，特别是那种屏幕滚下来之后才显示在右下角的，然后点一下又能慢慢滑回顶部。用jQuery可以很轻松的实现这个功能，方法来自我爱水煮鱼。

1.在footer.php页面的相应位置添加以下代码，建议是接在版权声明那一句后面。

▲

2.添加css样式

#gotop{

display:block;

width:60px;

height:60px;

position:fixed;

bottom:50px;

right:40px;

border-radius:10px 10px 10px 10px;

text-decoration:none;

display:none;

background-color:#999999;

}

#gotop span{

display:block;

width:60px;

color:#dddddd;

}

#gotop span:hover{

color:#cccccc;

}

#gotop span{

font-size:40px;

text-align:center;

margin-top:4px;

}

这里用一个大字体的三角号来代替图片，方便效率又高。到这里按钮就已经写好了，但是还看不见，下一步通过jQuery来控制它的显示。

3.添加js代码

如果你的主题已经有调用了某些js文件，把以下代码加在任意一个js文件的末尾就可以了。

$(function(){

$(window).scroll(function(){ //只要窗口滚动,就触发下面代码

var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度

if( scrollt >200 ){ //判断滚动后高度超过200px,就显示

$(“#gotop”).fadeIn(400); //淡出

}else{

$(“#gotop”).stop().fadeOut(400); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动

}

});

$(“#gotop”).click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部

$(“html,body”).animate({scrollTop:”0px”},200);

});

});