jQuery实例2

下拉框实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .a{
            position: fixed;
            left: 0px;
            bottom: 0px;
        }

        .hide{
            display: none;  /*默认不出现返回顶部*/
        }
    </style>

</head>
<body>
    <div style="height: 1500px; background-color: #B0E0E6; overflow: auto;">    <!--overflow: auto;表示当高度大于页面高度时，使用下拉框-->
        <a class="a hide" onclick="gotop();">返回顶部</a>
        <div style="height: 500px; background-color: aqua; overflow: auto;">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </div>
    </div>

    <script src="jquery-2.2.4.js"></script>
    <script>
        function gotop(){
            $(window).scrollTop(0); //设置滑轮滚动距离为0
        }

        window.onscroll = function(){  //window.onscroll 监听鼠标滑轮事件，(鼠标滑轮滚动时执行function())
            if ($(window).scrollTop()>100){
                $('a').removeClass('hide');   //下拉框距顶部大于100，显示返回顶部按钮
            }else {
                $('a').addClass('hide');
            }
        }
    </script>
</body>
</html>

 

 

position()与offset()：

position()表示子标签与父标签(左上角)的偏移距离。

offset()表示标签与页面或屏幕(左上角)的偏移距离。

height()与width():获取自身的高度和宽度(裸)。

 

posted @ 2016-06-22 11:47  ahaii  阅读(155)  评论(0)  编辑  收藏  举报