• 欢迎访问窗外天空网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站
  • 本站兼容IE9+,谷歌Chrome,火狐Firefox等主流浏览器

为WordPress添加轻量级"回到顶部"代码

Wordpress nixon li 2,818次浏览 3个评论 扫描二维码

为WordPress添加轻量级"回到顶部"代码

这是一个比较快捷的实现滚动到网站顶部的方法,代码十分轻巧,也容易添加。适用于wordpress及其他网站程序。

将以下js扔进你的js文件中,也可以保存为js单独加载:

;(function(e){e.scrollUp=function(t){var n={scrollName:"scrollUp",topDistance:300,topSpeed:300,animation:"fade",animationInSpeed:200,animationOutSpeed:200,scrollText:"",scrollImg:false,activeOverlay:false};var r=e.extend({},n,t),i="#"+r.scrollName;e("<a/>",{id:r.scrollName,href:"#top",title:r.scrollText}).appendTo("body");if(!r.scrollImg){e(i).text(r.scrollText)}e(i).css({display:"none",position:"fixed","z-index":"2147483647"});if(r.activeOverlay){e("body").append("<div id='"+r.scrollName+"-active'></div>");e(i+"-active").css({position:"absolute",top:r.topDistance+"px",width:"100%","border-top":"1px dotted "+r.activeOverlay,"z-index":"2147483647"})}e(window).scroll(function(){switch(r.animation){case"fade":e(e(window).scrollTop()>r.topDistance?e(i).fadeIn(r.animationInSpeed):e(i).fadeOut(r.animationOutSpeed));break;case"slide":e(e(window).scrollTop()>r.topDistance?e(i).slideDown(r.animationInSpeed):e(i).slideUp(r.animationOutSpeed));break;default:e(e(window).scrollTop()>r.topDistance?e(i).show(0):e(i).hide(0))}});e(i).click(function(t){e("html, body").animate({scrollTop:0},r.topSpeed);t.preventDefault()})}})(jQuery);

再将以下css扔进你的css样式中:

#scrollUp {
	bottom: 20px;
	right: 20px;
	height: 38px;
	width: 38px;
	background: url(images/top.png) no-repeat;
}

上面样式中用到的图片,下面图片右键另存为即可:
为WordPress添加轻量级"回到顶部"代码
或者自己网上搜索 回到顶部 图片即可。

调用: 在footer.php中添加以下代码(加在body内):

<script>
	$(function () {
		$.scrollUp();
	});
</script>

版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明为WordPress添加轻量级"回到顶部"代码
喜欢 (0)
微信扫码
支付宝扫码
分享 (0)
关于作者:
咳...咳...
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 已经有了,但是还是学习了
    孤军奋战2015-09-12 10:50 回复 未知的操作系统 | 未知浏览器
    • 一起学习 :wink:
      nixon2015-09-14 14:57 回复 Ubuntu Linux | Firefox 40.0
  2. 很不错
    孤军奋战2015-09-12 10:53 回复 未知的操作系统 | 未知浏览器