首页 新闻 赞助 找找看

请教怎样实现在博客园的【我的博客】中的每个页面自动显示隐藏【回到顶部】按钮?

0
悬赏园豆:20 [已解决问题] 解决于 2013-10-18 17:13

请教怎样实现在博客园的【我的博客】中的每个页面自动显示隐藏【回到顶部】按钮?

如这个效果:【移动滚动条右底部即可看到效果】
javascript 代码列表 - 为程序员服务
http://outofmemory.cn/code-snippet/tagged/javascript

原理在这:
jquery返回页面顶部 - 上品物语 - 博客园
http://www.cnblogs.com/eczhou/archive/2013/01/09/2852708.html

在【我的博客】--》右上角,设置-博客设置-设置
后可以看到几个填代码的框:
1.通过CSS代码定制代码页面风格
2.页首Html代码
3.页脚Html代码

分别要怎样填写,才能实现那个效果?

alone2013的主页 alone2013 | 初学一级 | 园豆:46
提问于:2013-08-15 23:44
< >
分享
最佳答案
0

哦,就用你提供的那篇文章中的css和js了,这里稍微改动了一点,图片去找一张png,这里用jpg演示下~

1.通过CSS代码定制代码页面风格

#toTop {
    width: 68px;
    height: 65px;
    display: none;
    position: fixed;
    right: 25px;
    bottom: 45px;
    background: url(https://images0.cnblogs.com/blog/310680/201301/09130645-8d99074069b145bea8de55e5df733b02.jpg) no-repeat 0 0;
    opacity: 0.6; 
}

#toTop:hover {
    opacity: 1;
    filter: alpha(opacity = 100);
}

2.页首Html代码(不用填,咱把js放到页脚去~)

3.页脚Html代码

<a href="javascript:" id="toTop" title="返回顶部" onclick="window.scrollTo(0,0);return false;"></a>
<script type = "text/javascript">
    function toTopHide(){
        $(document).scrollTop()>400?
                $("#toTop").show()
                    :$("#toTop").hide();
    }
    $(window).scroll(function(){toTopHide()});
</script>

就可以了~

收获园豆:20
libaoheng | 小虾三级 |园豆:1433 | 2013-08-16 00:19
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册