JQ实现页面置顶button消失效果

最新推荐文章于 2024-05-21 14:15:14 发布

ai622428

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量105

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/iDennis/p/5775143.html

版权

JQ实现页面置顶button消失效果
 1、Head部分内容：
<head>
    <title></title>
    <link href="Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script>
    $(function () {
        //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() > 100) {
                    $("#back-to-top").fadeIn(1500);
                }
                else {
                    $("#back-to-top").fadeOut(1500);
                }
            });
            //当点击跳转链接后，回到页面顶部位置
            $("#back-to-top").click(function () {
                $('body,html').animate({ scrollTop: 0 }, 1000); //1000代表1秒时间回到顶点
                return false;
            });
        });
    });
</script>
</head>

2、Body部分内容：
这里填充一堆内容，直到出现下拉滚动条。
 <p id="back-to-top"><a href="#top"><span></span></a><a name="top">返回顶部</a></p>

3、添加CSS样式：
/*returnTop*/
p#back-to-top
{
    position: fixed;
    display: none;
    bottom: 100px;
    right: 80px;
}
p#back-to-top a
{
    text-align: center;
    text-decoration: none;
    color: #d1d1d1;
    display: block;
    width: 64px; /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
    -moz-transition: color 1s;
    -webkit-transition: color 1s;
    -o-transition: color 1s;
}
p#back-to-top a:hover
{
    /*color:#979797;*/
    color: #fff;
    background-color: #fff;
}
p#back-to-top a span
{
    background: transparent url(../Images/sprite.png?1202) no-repeat -5px 0px; /*background:transparent url(../Images/sprite.png?1202) no-repeat -25px -290px;*/
    border-radius: 6px;
    display: block;
    height: 64px;
    width: 56px;
    margin-bottom: 5px; /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
    -moz-transition: background 1s;
    -webkit-transition: background 1s;
    -o-transition: background 1s;
}
#back-to-top a:hover span
{
    background: transparent url(../Images/sprite.png?1202) no-repeat -5px 0px;
}

转载于:https://www.cnblogs.com/iDennis/p/5775143.html

ai622428

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ实现页面置顶button消失效果

JQ实现页面置顶button消失效果 1、Head部分内容：<head> <title></title> <link href="Content/Site.css" rel="stylesheet" type="text/css" /> <script src="http://aja...
复制链接

扫一扫