完善本博客zblog二维码图片显示隐藏和向上按钮的功能-教程、积累-涂涂研版

前段时间把本站的主题（Bing-blog）应用后，二维码和向上按钮的功能一直没有实现，由于对于jQuery不懂，所以实现比较难，所以今天正好下夜班，所以在网上找代码，自己修改实验，算是功夫不负有心人吧，两项功能实现了，现在分享下，希望对大家有所帮助。这篇文章没有区分asp和php，我想应该差不多，呵呵。

步骤：

（0）两个功能的模板文件代码如下：

<div class="fixedbox">
            <div class="returntop">
                <i class="fa fa-arrow-up" onclick="pageScroll()">  
                </i>
            </div>
            <div class="qrcode">
                <i class="fa fa-qrcode">
                </i>
                <div class="qrcodeimg">
                    <img src="{$host}zb_users/theme/{$theme}/style/ew.png"
                    class="qrcode" width="150" height="150" alt="qrcode" />
                </div>
            </div>
        </div>

（1）二维码图片显示隐藏

js文件里代码如下（用到jQuery）：

//图片显示隐藏
$(document).ready(function(){
  $(".qrcode").click(function(){
    $(".qrcodeimg").toggle();
    $(".qrcode").toggleClass("click");
  });
});
$(document).ready(function(){
  $(".qrcodeimg").click(function(){
    $(".qrcodeimg").toggle();
  });
});

（2）向上按钮

js文件里代码如下（摘自新鲜人的metro主题里的js代码）：

//向上按钮
function pageScroll(){
    //把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数）
    window.scrollBy(0,-100);
    //延时递归调用，模拟滚动向上效果
    scrolldelay = setTimeout('pageScroll()',100);
    //获取scrollTop值，声明了DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值
    var sTop=document.documentElement.scrollTop+document.body.scrollTop;
    //判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面）
    if(sTop==0) clearTimeout(scrolldelay);
}

效果如本站的右侧的向上和二维码图片显示按钮，如图：