返回顶部和底部（动画）

时间：2017-06-18 23:32:04 阅读：200 评论：0 收藏：0 [点我收藏+]

标签：dtd 滚动 utf-8 eva oct asc splay style 工厂

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>特效加工厂</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
    body {
        margin: 0;
        padding: 0;
        font-size: 12px;
    }
    
    #main {
        width: 910px;
        margin: 0 auto;
        height: 2000px;
    }
    
    .go {
        width: 47px;
        height: 106px;
        position: fixed;
        _position: absolute;
        _top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||200)-(parseInt(this.currentStyle.marginBottom, 10)||0)));
        right: 12px;
        bottom: 25%;
        background-image: url("tobg.png");
        background-repeat: no-repeat;
        background: red;
    }
    
    .go a {
        display: block;
        width: 37px;
        margin: 5px;
        border: 0;
        overflow: hidden;
        float: left;
        cursor: pointer;
        background-color: red;
    }
    
    .go .top {
        background: #f60;
        height: 22px
    }
    
    .go .feedback {
        background-position: 0 -22px;
        height: 32px
    }
    
    .go .bottom {
        background: #ccc;
        height: 22px
    }
    
    .go .top:hover {
        background-position: -38px -0px
    }
    
    .go .feedback:hover {
        background-position: -38px -22px
    }
    
    .go .bottom:hover {
        background-position: -38px -55px
    }
    </style>
    <script type="text/javascript">
    $(function() {

        $(".top").click( //定义返回顶部点击向上滚动的动画
            function() {
                $(‘html,body‘).animate({
                    scrollTop: 0
                }, 700);
            });
        $(".bottom").click( //定义返回底部点击向下滚动的动画
            function() {
                $(‘html,body‘).animate({
                    scrollTop: document.body.clientHeight
                }, 700);

            });


    })
    </script>
</head>

<body>
    <div id="main">
        <div class="go">
            <a title="返回顶部" class="top">top</a>
            <a title="如果您有意见，请反馈给我们！" class="feedback" href="http://www.baidu.com" target="_blank">反馈</a>
            <a title="返回底部" class="bottom">bottom</a>
        </div>
    </div>
</body>

</html>

效果图：

技术分享

返回顶部和底部（动画）

标签：dtd 滚动 utf-8 eva oct asc splay style 工厂

原文地址：http://www.cnblogs.com/huanghuali/p/7045645.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行