欢迎光临
我们一直在努力

为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;
}

上面样式中用到的图片,下面图片右键另存为即可:

或者自己网上搜索 回到顶部 图片即可。

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

<script>
	$(function () {
		$.scrollUp();
	});
</script>
窗外天空
关注公众号『窗外天空』

获取更多建站运营运维新知!
互联网创业、前沿技术......

赞(0) 打赏
文章名称:《为WordPress添加轻量级"回到顶部"代码》
文章链接:https://www.nixonli.com/18484.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 3

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    已经有了,但是还是学习了

    孤军奋战9年前 (2015-09-12)回复
    • 一起学习 😉

      nixon9年前 (2015-09-14)回复
  2. #2

    很不错

    孤军奋战9年前 (2015-09-12)回复

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏