jQuery实现置顶和置底特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery实现置顶和置底特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>jQueryʵ���ö����õ���Ч</title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#updown").css("top", window.screen.availHeight / 2 - 100 + "px");
            $(window).scroll(function () {
                if ($(window).scrollTop() >= 100) {
                    $('#updown').fadeIn(300);
                } else {
                    $('#updown').fadeOut(300);
                }
            });
            $('#updown .up').click(function () { $('html,body').animate({ scrollTop: '0px' }, 800); });
            $('#updown .down').click(function () { $('html,body').animate({ scrollTop: document.body.clientHeight + 'px' }, 800); });
        });
    </script>
    <style type="text/css">
        <!--
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 3000px;
        }

        #updown {
            _top: expression(eval((document.compatMode&&document.compatMode=="CSS1Compat")?documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-1:document.body.scrollTop+document.body.clientHeight-this.clientHeight-1));
            position: fixed;
            _position: absolute;
            top: 200px;
            right: 30px;
            display: none;
        }

        #updown span {
            cursor: pointer;
            width: 48px;
            height: 50px;
            display: block;
        }

        #updown .up {
            background: url(images/updown.png) no-repeat;
        }

        #updown .up:hover {
            background: url(images/updown.png) top right no-repeat;
        }

        #updown .down {
            background: url(images/updown.png) bottom left no-repeat;
        }

        #updown .down:hover {
            background: url(images/updown.png) bottom right no-repeat;
        }

        a {
            text-decoration: none;
            outline: none;
            color: #666666;
        }

        a:hover {
            text-decoration: none;
        }

        img {
            border: 0;
        }

        ul {
            list-style: none;
            margin: 0;
        }

        h2 {
            color: #6CBD45;
            font-size: 14px;
            font-weight: bold;
            padding-bottom: 0.5em;
            margin: 0;
        }

        h3 {
            font-size: 13px;
            font-weight: bold;
        }

        #meun {
            color: #fff;
            padding-left: 10px;
        }

        #meun img {
            float: left;
        }

        #submeun {
            margin-left: 70px;
            float: left;
        }

        #submeun li {
            text-align: center;
            margin-right: 10px;
            float: left;
            display: inline;
        }

        #submeun li a {
            color: #fff;
            height: 50px;
            line-height: 50px;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            padding-left: 15px;
            padding-right: 15px;
            display: block;
        }

        #submeun li.cur {
            text-align: center;
            background: #82ce18;
            margin-right: 10px;
            float: left;
            display: inline;
        }

        #top {
            background-color: #000;
            margin: 0em 0 10px 0em;
            border-style: solid;
            border-width: 1px;
            border-color: #E5E5E5;
            height: 50px;
            line-height: 50px;
        }

        h2.subtitle {
            font-size: 13px;
            float: right;
            color: #6CBD45;
            margin: 0 10px;
            text-align: right;
        }

        h1.title {
            height: 50px;
            font-size: 12px;
            background: url(logo.png) no-repeat;
        }

        h1.title a:link, h1.title a:visited, h1.title a:hover {
            color: #000;
            text-decoration: none;
        }
        -->
    </style>
</head>

<body>
    <div id="content">
        <br /><br /><br /><br />
        <center><b><font size="7" color="#FF0000">�����¹���</font></b></center>
        <br /><br /><br />
        <!--DEMO start-->
        <div id="updown"><span class="up"></span><span class="down"></span></div>
        <!--DEMO end-->
    </div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)