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

来源:赚贝金融

阅读量:浏览: 382

发布时间:2019-01-17

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)  /* 评论图 */

}
怎么样是不是很简单啊!
仿卢松松博客

相关推荐

最新内容

猜你喜欢