WordPress主题的jQuery应用之返回顶部滑动效果

首先在header.php的head标签中加载jQuery库

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

新建一个JS文件,在header.php的head标签中加载,JS文件中加入下例代码:

1
2
$('.top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
$('.bot').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});

在footer.php文件中加入代码:

1
2
3
4
<div ID="goto">
    <div class="top">顶端</div>
    <div class="bot">底端</div>
</div>

在CSS文件中添加下例代码:

1
2
3
4
5
*html #goto { position: absolute; top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2));}
#goto { position: fixed; left: 50%; top: 50%; bottom: auto; margin-left: -500px; z-index: 999;}
#goto .top, #goto .bot { width: 28px; height: 41px; margin: 5px 0; background-image: url('images/goto.gif'); background-repeat: no-repeat; display: block; text-indent: -9999px; cursor: pointer;}
#goto .top { background-position: 0 0;}
#goto .bot { background-position: 0 100%;}

原文:http://immmmm.com/added-sliding-effect-enhanced.html

WordPress主题的jQuery应用之返回顶部滑动效果》上有 3 条评论

  1. 我的博客也在用,但是不知道怎么实现的,改天试试用jQuery修改看看

发表评论

电子邮件地址不会被公开。 必填项已用*标注