今天又给大家带来一款 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制作案例演示模板
- Xampp2016打开php文件提示Call to undefined function curl_init()
- WordPress管理员无需密码一键登陆站点注册用户
- 启用七牛后知更鸟主题无法评论解决办法
- 为什么WordPress是最好的CMS(2020)
- 浏览器插件:复制链接名称和地址
- WordPress免插件制作网站地图(HTML+XML两个版本)
- xiu主题实现鼠标悬停文章标题向右滑动特效
- 家乡下雪了,我的女人在那里等我
- 万网虚拟主机更改固定链接失败的终极办法
- xiu主题修改社交字符
- 不忘初心,方得始终,你真的需要她么?
- 如何实现淘宝客链接js封装
如有疑问,请前往问答中心反馈!
反馈