WordPress仿卢松松博客侧边回顶部,投稿,评论随页面滚动效果

WordPress仿卢松松博客侧边回顶部,投稿,评论随页面滚动效果!其实很简单就是一个普通的随页面滚动代码稍作修改!

下面贴上代码(直接放到底部文件):
<!--调用随页面滚动置顶,投稿,评论代码开始-->
<script>
	$(function(){
		$(window).scroll(function(){
			if($(window).scrollTop()>100){
				$("#side-bar .gotop").fadeIn();	
			}
			else{
				$("#side-bar .gotop").hide();
			}
		});
		$("#side-bar .gotop").click(function(){
			$('html,body').animate({'scrollTop':0},500);
		});
	});
</script>

  <ul id="side-bar" class="side-bar">
  <a href="#" class="gotop" style="display:none;"><s class="g-icon-top"></s></a>
  <a href="/tg" target="_blank"><s class="g-icon-tg"></s><span></span></a>
  <a href="#comments"><s class="g-icon-pinglun"></s><span></span></a>
</ul>
 
  
  <!--调用随页面滚动置顶,投稿,评论代码结束-->
样式(把代码复制到你的样式文件里面):
/* 随页面滚动置顶,投稿,评论样式 */
.side-bar {
	position: fixed;
	left: 50%;
	margin-left: 260px; /* 右边距离,根据自己博客主题修改宽度 */
	z-index: 99
	border-bottom: none;
	bottom: 100px; /* 底部距离,根据自己博客主题修改宽度 */
}

.side-bar a s {
	display: block;
}

.g-icon-top {
	height: 57px;
	width: 15px;
	margin-top: 10px;
	background-image: url(http://www.zbzmtbk.com/img/btn_top.gif) /* 回顶部图 */
}

.g-icon-tg {
	height: 52px;
	width: 15px;
	margin-top:10px;
	background-image: url(http://www.zbzmtbk.com/img/btn_tougao.gif)/* 投稿图 */
	
}
.g-icon-pinglun {
	height: 57px;
	width: 15px;
	margin-top: 10px;
	background-image: url(http://www.zbzmtbk.com/img/btn_comment.gif)  /* 评论图 */

}

怎么样是不是很简单啊!

未经允许不得转载:赵斌自媒体 » WordPress仿卢松松博客侧边回顶部,投稿,评论随页面滚动效果

顶 (0)

评论 0

◎如是广告,评论将无法显示,博主微信/QQ:80747084
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

支付宝首页搜索: 538757204 领取12月支付宝现金大红包福利

推广者专属福利,新客户无门槛领取总价值高达2775元代金券,每种代金券限量500张,先到先得。