jquery scrollTop及其应用例子

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>

jquery scrollTop及其应用例子相关推荐

jquery中ajax完整例子get,jq的ajax方法，jquery中ajax完整例子
jq的ajax方法,jquery中ajax完整例子相较与js异步对象的繁琐,jq的ajax对象结构更加清晰一:ajax对象简述 ajax(Asynchronous JavaScript and X ...
Web之JQuery用法和小例子
jQuery中文文档:https://jquery.cuishifeng.cn/ 一.jQuery 1.二者可以相互转换 <!DOCTYPE html> <html lang=&qu ...
Jquery框架核心部分例子 .
$(expr)说明:该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础参数:expr:字符串,一个查询表达式或一段html字符串例子: 未执行j ...
jquery scrollTop定位问题
今天遇到一个时间弹出框,其高度为固定高度,容器内有时间列表,如下图: 由于时间较多,所以我希望做一个动画效果,方便用户的选择,就是当用户已选择过时间,或者说初始化的时候这个预约时间值就存在,那么我希望 ...
java动态生成树_Dtree+Jquery动态生成树节点例子
1.先来介绍一下. dtree 的用法.(我引用了以前我收集的一篇文章.还比较详细,出处不记得啦).文章下面会附带dtree用法的例子. Dtree目录树的总结一:函数 1:页面中 tree.add ...
html层次选择器例题,JQuery 层次选择器的例子
层次选择器_www.jbxue.com $(function () { //------1.在给定的祖先元素下匹配所有后代元素(包含了子元素,以及子元素的元素,一直往下延伸) //var $divs ...
js jquery scrollTop 指定位置
1.如果是获取,原生js实现很容易: 1 2 3 var div = document.getElementById('wgt-ask'), scrollTop = div.scrollTop ...
基于jquery的异步提交例子
2019独角兽企业重金招聘Python工程师标准>>> 后台代码一. /** * 得到大类的数据 * @param request * @param response ...
jquery ajax asmx 简单例子,jQuery.ajax 调用服务（.aspx，.asmx）
方法1:Post(json)+IIS下://aspx,适用本机 $.ajax({ url: "TpgConnect_Rain/postgreService.aspx/getRainInfo& ...

jquery scrollTop及其应用例子

图示：

注意：

jquery scrollTop及其应用例子相关推荐

最新文章

热门文章