今天又给大家带来一款WordPress网站常用的Jquery特效:返回顶部,同样的必须网站首先引用jquery,小白记得替换js路径哦
<script type="text/javascript" src="jquery.js"></script>
然后在主题js文件里面添加下面代码就可以啦,小白请看:Script脚本文件转换js文件调用
$("#BackToTop").click(function () { var speed=200;//滑动的速度 $('body,html').animate({ scrollTop: 0 }, speed); return false; });
其中BackToTop是你的触发返回顶部的元素ID。你可以通过css来定位这个id的位置,小白请看:wordpress必知的css布局知识
上面的代码也可以直接写成
$("#BackToTop").click(function(){ $('body,html').animate({scrollTop:0},200); return false; });
如果需要页面滚动超过一屏时显示返回顶部按钮,则需要下面的代码:
$(document).ready(function(){ $("#BackToTop").hide(); $(function () { var height=$(window).height(); $(window).scroll(function(){ if ($(window).scrollTop()>height){ $("#BackToTop").fadeIn(500); }else{ $("#BackToTop").fadeOut(500); } }); $("#BackToTop").click(function(){ $('body,html').animate({scrollTop:0},200); return false; }); }); });
之前陌小雨还分享过:Jquery特效:点击文字或图片隐藏指定div