今天又给大家带来一款 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
你可能对这些文章感兴趣:
- 小雨,你最近在折腾啥呢?
- WordPress免插件压缩网页代码
- WordPress主题后台制作教程
- 陌小雨的工作室
- 百度死链提交工具使用方法及死链xml文件制作(修正)
- WordPress调用分类5篇文章(1带缩略图+4不带缩略图)随机不重复
- WordPress插件推荐:WeChat Subscribers Lite
- WordPress个性化登陆界面(添加会遮挡双眼的猫头鹰动画)
- 总结个人博客赚钱方法渠道及常见不靠谱网赚思维
- 万网虚拟主机添加https超详细攻略(最新ssl方案)
- WordPress调用另一个站点最新文章列表
- WordPress4.8来了,新功能很不错哦
- WordPress后台文章可视化界面段落不缩进解决办法
- 知更鸟主题图片暗箱和侧边Tab菜单失效解决办法
如有疑问,请前往问答中心反馈!
反馈