【小5聊】jquery之获取滚动条元素的实内容际高度以及回到顶部

设置固定高度超出高度后会产生滚动条，那么内容内的实际高度如何获取呢

1、获取实际高度：$("div")[0].scrollHeight

2、设置滚动条到底部：$("div").animate({scrollTop:$("div")[0].scrollHeight+"px"}, 500);

 

【文档页面的滚动条滚动方法】

                $(document).scroll(function () {

                    var that = this;
                    var scrollTop = parseInt($(that).scrollTop());
                    if (scrollTop) {

                    }
                });

 

更新

【页面效果】

【代码】

<style type="text/css">
    .ywebframe-arrow-top {
        display:none;
        position: absolute;
        width: 50px;
        height: 50px;
        top: -5px;
        left: -5px;
        box-shadow: 0 0 10px #ccc;
        border-radius: 50px;
        cursor:pointer;
    }

        .ywebframe-arrow-top:before {
            content: "";
            position: absolute;
            top: 22px;
            left: 18px;
            width: 12px;
            height: 12px;
            border: 1px solid #666;
            border-width: 0 2px 2px 0;
            -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
        }
</style>
    
<!--回到顶部-->
<div style="position:fixed;bottom:100px;right:100px;">
    <div class="ywebframe-arrow-top"></div>
    <div style="display:none;background:#fff;box-shadow:0 0 10px #ccc;padding:10px;">
        <span>回到顶部</span>
    </div>
</div>


<script type="text/javascript">
    $(document).scroll(function () {

        var that = this;
        var scrollTop = parseInt($(that).scrollTop());
        if (scrollTop > 200) {
            $(".ywebframe-arrow-top").fadeIn(500);
        }
        else {
            $(".ywebframe-arrow-top").fadeOut(500);
        }
    });

    $(".ywebframe-arrow-top").click(function () {
        $(document.body).animate({ scrollTop: "0px" }, 500);
    });
</script>