jquery scrollTop及其应用例子

最新推荐文章于 2023-07-26 20:04:53 发布

ccessl

最新推荐文章于 2023-07-26 20:04:53 发布

阅读量787

点赞数

分类专栏： jQuery CSS

本文链接：https://blog.youkuaiyun.com/cc_fys/article/details/78119814

版权

jQuery 同时被 2 个专栏收录

15 篇文章

订阅专栏

CSS

6 篇文章

订阅专栏

jquery获取整个网页的文档高度：$(document).height()

jquery获取浏览器可视窗口的高度：$(window).height()

jquery获取浏览器可视窗口顶端距离网页顶端的高度：$(window).scrollTop()

图示：

注意：

1、当网页滚动条拉到最底端时：$(document).height() == $(window).height() + $(window).scrollTop()

2、当网页高度不足浏览器窗口时：$(document).height()==$(window).height()

基于以上知识，写了一下应用的例子

例子1：回到顶部按钮> 当我们在浏览页面的时候，点击回到顶部，页面可以回滚到页面顶部。当页面回到顶部时fadeOut淡出，隐藏按钮。其他情况下fadeIn淡入，按钮出现。

$(window).scrollTop()==0 时回到了顶部。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <style type="text/css">
        /*样式*/
        .to-top {
            position: fixed;
            bottom: 100px;
            right: 100px;
            display:none;
            z-index: 999;
        }
        .to-top .item {
            position: relative;
            display: block;
            width: 58px;
            height: 58px;
            border: 2px #42b983 solid;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 5px;;
            background-color: #fff;
            text-align: center;
        }
        .to-top  p {
            font-size: 12px;
            text-align: center;
        }
        .to-top .to{
            transform:rotate(90deg);
            color:#42b983;
            font-size:18px;
        }
        .to-top .item:hover{
            background-color: #f5f8f8;
        }
    </style>
</head>
<body>
<!--撑起页面高度-->
<div style="height: 3000px;"></div>
<!--回到顶部标签  -->
<div class="to-top">
    <div class="item">
        <div class="to"><</div>
        <p>回到顶部</p>
    </div>
</div>

<script type="text/javascript">
    $(window).scroll(function() {
        if ($(this).scrollTop() != 0) {
            $('.to-top').fadeIn();
        } else {
            $('.to-top').fadeOut();
        }
    });
    $('.to-top').click(function() {
        $('body,html').animate({ scrollTop: 0 }, 800);
    })
</script>

</body>
</html>

例子2：浏览进度条〉浏览页面的时候，可以大致显示浏览了多少页面长度。
计算百分比：var ratio = (($(window).scrollTop() + $(window).height()) * 100) / $(document).height() + '%';
当当网页高度不足浏览器窗口时，长度为100%，在最顶端时为0%，其他情况下长度为ratio值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <style type="text/css">
        .progress-indicator{
            position: fixed;
            top: 0;
            left: 0;
            height: 4px;
            background-color: #0A74DA;
        }
    </style>
</head>
<body>
<div class="progress-indicator" style="width:0%"></div>
<!--撑起页面高度-->
<div style="height: 3000px;"></div>

<script type="text/javascript">
    if($(document).height()==$(window).height())
    {
        $('.progress-indicator').css('width','100%');
    }
    $(window).scroll(function() {
        var ratio='0%';
        if($(window).scrollTop()!=0) {
            ratio = (($(window).scrollTop() + $(window).height()) * 100) / $(document).height() + '%';
            $('.progress-indicator').css('width', ratio);
        }
        else
        {
            $('.progress-indicator').animate({ width: ratio }, 50);
        }
    });
</script>

</body>
</html>