jquery scrollTop及其应用例子

来源：互联网发布：淘宝怎么开代练店编辑：程序博客网时间：2024/06/07 11:44

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>

阅读全文

0 0