现在位置首页 / 开源代码 /正文

Z-blog添加回到顶部效果

作者: IT小兵 | 2013年8月20日| 热度:℃ | 评论: |参与:

suchso.com开博以来,随着我在博客园上发布文章以及各种宣传手段的增加,

流量也增加了,博文也多了,但是博文多了就有一点不好了,就是首页往下浏览的时候,

回到页面顶部就非常麻烦。所以今天加上了  回到顶部 按钮。从而能使我们的网页更人性化。

其实加入代码非常简单。

首先,引用Jquery。z-blog已经自带jquery了。这个就不用引用了。 

然后,添加样式。我修改是在模板文件default.html添加的。 

先在html中增加一个div :

<div id="gotop"></div>

在head中增加样式

<style type="text/css">
#gotop{
    display:none;
    width:55px;
    height:55px;
    position:fixed;
    right:50px;
    bottom:50px;
    background:url(<#ZC_BLOG_HOST#>themes/<#ZC_BLOG_THEME#>/style/images/backtop2013.png) no-repeat -70px 0px;    
}
</style>

接着,就是jquery代码了:

<script type="text/javascript">
function goTop()
{
    $(window).scroll(function(e) {
        //若滚动条离顶部大于100元素
        if($(window).scrollTop()>100)
            $("#gotop").fadeIn(1000);//以1秒的间隔渐显id=gotop的元素
        else
            $("#gotop").fadeOut(1000);//以1秒的间隔渐隐id=gotop的元素
    });
};
$(function(){
    //点击回到顶部的元素
    $("#gotop").click(function(e) {
            //以1秒的间隔返回顶部
            $('body,html').animate({scrollTop:0},1000);
    });
    $("#gotop").mouseover(function(e) {
        $(this).css("background","url(images/backtop2013.png) no-repeat 0px 0px");
    });
    $("#gotop").mouseout(function(e) {
        $(this).css("background","url(images/backtop2013.png) no-repeat -70px 0px");
    });
    goTop();//实现回到顶部元素的渐显与渐隐
});
</script>


注意事项:

  1. 需要把图片z-blog jquery 回到顶部放在你使用的主题下面的style/images下面。

<#ZC_BLOG_HOST#>themes/<#ZC_BLOG_THEME#>/style/images/backtop2013.png

  

转发注明来自:IT分享 http://suchso.com

点击阅读本文所属分类的更多文章: 开源代码 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询