13071077710
您的当前位置: 首页 > wordpress > 为wp主题添加返回顶部按钮

为wp主题添加返回顶部按钮

时间: 2016-4-8

1、准备一张图片素材,可右键另存为…/images/backtop.gif backtop

2、添加js代码

<script type="text/javascript">
 //BackTop
 $(function(){
 var $backToTopTxt = "", $backToTopEle = $('<a class="backToTop" title="返回顶部"></a>').appendTo($("body"))
 .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
 $("html, body").animate({ scrollTop: 0 }, 120);
 }), $backToTopFun = function() {
 var st = $(document).scrollTop(), winh = $(window).height();
 (st > 0)? $backToTopEle.fadeIn(): $backToTopEle.fadeOut();
 if (!window.XMLHttpRequest) {
 $backToTopEle.css("top", st + winh - 166); 
 }
 };
 $(window).bind("scroll", $backToTopFun);
 $(function() { $backToTopFun(); });
 });
</script>

3、样式美化参考:

 /* Backtop */
 .backToTop{ width:46px; height:44px; background:#999 url(images/backtop.gif) no-repeat 7px 11px; position:fixed; _position:absolute; right:20px; bottom:40px; _bottom:"auto"; cursor:pointer; display:none; -khtml-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; z-index:9999;}
 .backToTop:hover{ background-color:#666;}

Copyright © 2013-2019 子歇    版权所有   网站地图